Animation

An image gallery is a nice example of AIM, where the larger version of an image can “morph” out from the smaller one when opened, and back in when closed.

There is quite a bit of interesting design possibility with `random()` coming to CSS. It pairs nicely with animation, particularly animation-composition for agumenting those generated values.

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… […]