This has been a long time coming, and I could not be more excited it’s finally here. And I know exactly who to thank for it. Our customers have been telling us to do this for a while now: Probably don’t call it Frontend anymore, you have a lot more offerings. The name Frontend Masters […]

Using our 3, 2, 1 state system, we can make popovers animate on “the way in” and “the way out” just like we did with dialogs in Part 1.

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.