There are plenty of issues tagged with web-animations-1 and web-animations-2. If there’s something you want to do which can’t be done, you can also join in the discussion in the CSSWG Github repository. I highly encourage everyone to play around with CSS animation properties more. I wrote that one up in Figuring out CSS animation properties with a magic kittencorn.īut there’s really quite a lot that can be done. I myself only discovered them in depth a couple years ago when I tried to animate the unofficial Talk.CSS mascot, Kittencorn. To add a separate transitions to hover-over and hover-off, include the -off transition on the element style and the -on transition on the :hover style. And even though you might not be able to do really complex line animations with only CSS alone, I find that there a number of animation properties that most people hardly ever use. Personally, building out animations with CSS is really fun. See the Pen Bling button ✨ by Chen Hui Jing ( CodePen.
CSS TRANSITION HOVER FULL
If you’re interested to see the full code in action, here’s the Codepen: Depending on the design, you could even use an SVG as a background image for the sweep shape instead of a vertical line. This is why it would be good to work with a motion designer, or someone who’s familiar with animation timings to tweak the things until it looks good. This is why when we set a border-radius value of 50% on a square box, we can get a perfect circle.Īnyway, for the pill-shape, setting the border-radius to half of the height of the element should do the trick. The value itself represents the radius of the circle at the corner of the box which affects how large the round corner is going to be. The pill-shapeįor the pill-shape, we call upon the trusty border-radius property. Then, there’s that gradient transition, and the final flourish is the light sweep effect.
First, there’s the button itself when nobody is interacting with it. I have a standard approach to building any design with CSS, and that is to break things down into smaller bits. To explain in words, when you hovered over the pill-shaped button, the background changed from a plain white background to a nice coloured gradient, and there was a light sweep effect across the button. Recently, I came across an animation prototype on a button hover state and wanted to see if I could build it with just CSS.
0 kommentar(er)
