Animation

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.

I’m on Chrome 129 and this animate to auto stuff is working for me with no special flags, so color me pleased. Would love to see this go into Interop 2025, as submissions are open. I’m using inline-size and max-content there, but it could be height and auto or block-size and min-content or whatever. There […]

Now that we’re starting to see better support for @starting-style and the allow-discrete keyword, we’ve got a pretty straightforward way for defining *different* entry and exit states.

Let’s look at a cool animated nav effect (from a recent post by Emil Kowalski) that uses CSS `clip-path` to move the highlighted nav item around. It’s an interesting look at this CSS feature and adds a lot of polish to a simple idea.

What happens with a CSS @keyframe animation like this when called? There is only one “keyframe” there at 50%. So what happens at 0% through the animation? The scale property is… whatever it already was. And at 100%? Back to whatever it already was. Assuming the default scale of 1, it will grow the element […]

The experimental CSS function `calc-size(auto)` allows transitions from zero to a specified value. Animating elements from zero to their intrinsic size has long been desired by CSS developers.

In a previous article, we created flower-like shapes using modern CSS (mask, trigonometric functions, etc). This article is a follow-up where we will create a similar shape and also introduce some fancy animations. Here is a demo of what we are building. Hover the image to see the animation Cool right? If you check the […]

Looks like the nice folks at Sparkbox put this animation comparison page together a few years ago. I love how extremely comprehensive it is. Of course we can animate things on the web with CSS, and there is a whole JavaScript API for it, and loads of JavaScript libraries all with different characteristics, but don’t […]