The Surprising Things That CSS Can Animate

Back in June, Will Boyd wondered what things CSS can animate, which turns out to be quite a lot.

This articles explores some of the unexpected things that CSS can animate and some nifty things you can do by animating them.

I like this demo where you choose between two options (in which a z-index is animated):

See the Pen
Overlapping Sushi Cards by Will Boyd (@lonekorean)
on CodePen.

One thing that surprised me very much is that you can animate visibility, but that it has special interpolation rules:

For the visibility property, visible is interpolated as a discrete step where values of p between 0 and 1 map to visible and other values of p map to the closer endpoint…

👀

The Surprising Things That CSS Can Animate →