CSS Fan Out with Grid and @property
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.
Tag Archive for
Animation
Arrival of Animate to Auto
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 […]
The Dialog Element with Entry *and* Exit Animations
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.
Clip Pathing Color Changes
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.
Single CSS Keyframe Tricks are Magic
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 […]
One of the Boss Battles of CSS is Almost Won! Transitioning to Auto
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.
Creating Wavy Circles with Fancy Animations in CSS
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 […]
Compare Web Animation Techniques
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 […]