Animation

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