#css-animations

#css-animations

@keyframes animations can be named using strings, allowing syntax like @keyframes "@animation" { /* ... */ } with corresponding animation: "@animation" declarations. This capability has existed for 11 years across browsers, yet remains relatively unknown to many developers seeking alternative keyframe naming conventions beyond standard identifier formats.

Modern CSS has great ways to position and move a group of elements relative to each other, such as anchor positioning. That said, there are instances where it may be better to take up the old ways for a little animation, saving time and effort. We've always been able to affect an element's structure, like resizing and rotating it. And when we change an element's intrinsic sizing, its children are affected, too. This is something we can use to our advantage.

Now it's time to break free from containment entirely. In this second part, we're shifting from shapes that hold things in place to paths that guide movement. We're moving from clip-path to offset-path, where your elements don't get clipped into new shapes, they travel along custom routes. We talk about reduced motion for accessibility later in this post, but not all the demos in this post implement that media query

Let's start things off with a quick animation tip that pairs perfectly with layered 3D text. Sometimes, we want to rotate the element without actually changing the orientation of the text so it stays readable. The trick here is to combine multiple rotations across two axes. First, rotate the text on the z-axis. Then, add a tilt on the x-axis. Finally, rotate the text back on the z-axis.

Parallax is a design pattern where webpage elements move at different speeds during scrolling, creating a layered, three-dimensional effect. Initially reliant on JavaScript, a recent CSS-only method has emerged, allowing smoother, non-blocking animations.

Adding SMIL animations in SVG enhances design capabilities, going beyond what CSS animations can achieve and offering designers a semantic animation solution.