Animation

The article explains how to design and animate a *circular* menu (that rotates in a circle!) in CSS using offset and animation-composition.

You can animate an .svg and it will play even with an `` or `background-image`, making it a viable GIF replacement if you can pull it off!

This time we’re looking at offset-path (and friends), which can be used to create movement when animated and benefits from all the same fancy functions that we learned about with clip-path.

A row of logos that animate forever perfectly and don’t have any duplicated HTML or JavaScript at all is quite a trick. Thanks modern CSS!

A look at what happens when you add a whole list of transforms to an element, and how that interacts with `animation-composition`.

You’ve got A LOT of control over the design of select menus now, and it can be done as a progressive enhancement.

I’ve seen other websites for helping you generate cubic-bezier() values in CSS for animations and transitions, but Easing Wizard is the best. Importantly, it helps you with the newer linear() style timings as well, which are more powerful. All the different types, the presets, the customization options, the different styles of previews, the clean design… […]

There are no obvious CSS properties or values for making a @keyframe animation wait between iterations, or have a pause before starting. But Nils Riedmann cooked up a clever way to do it using linear() animation timing. I think this is cleaner than faking it with multiple benign keyframe steps. Remember linear is not the […]

A “fan out” animation involves sequentially revealing items from a stack with a bouncy effect. By using CSS grid, we save quite a bit of fiddly positioning work.