Each pseudo element plays a distinct role in how the view transition animates. The browser does most of the heavy lifting though, which makes it a little hard to see what’s actually happening under the hood.

Here’s a brand new approach to creating staggered animations in CSS using a single progress value, allowing for smooth linkage to various inputs like scrolling. By utilizing a mathematical formula, it enhances control over animated elements without isolating their timelines, making animations more versatile and scrubbable.

Using @counter-style for tricky visual effects like word rotation and obfuscation.

@counter-style is useful for replacing the ::marker of lists easily, but it controls any markers-of-counters, so we can use it for more.

You can style the “on the way in” and “on the way out” styles for elements, even when they are moving to/from display: none;. Yay.

There are quite a few “gotchas,” developers face when getting into the new @function syntax of CSS. Some are getting addressed!