CSS Animations

So for some proof of concepts I recently created some animations using css. What would have in the past required javascript can now be done with css in many cases. Mozilla has a great overview and details on using css animations

In one animation I wanted an svg to rotate in the background and in another I wanted an element to slowly glow on and off. In both cases it helped to have a tool to do the basic animation. I have been using Figma for the last year and there are some plugins that will generate css animation code. Figmotion seems to be the most popular, but I liked Motion a bit better as it made it easier to select items in the hierarchy of your frame in its left side panel.

Unfortunately, Figma itself does not support viewing animations in the editor although you can save them in the GIF format that can then be played in the prototype player. Using Motion you can export it as an animated gif and then drag that file back into your Figma file. If you are using the animation else where as I was there are several other export options including CSS, which is what I needed.

I then took that css and played around with it more in codepen.io. You can find lots of other folks css animation experiments there as well.

Comments are closed.