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 →

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.