How the cascade, the animation-fill-mode, and implicit keyframes make things a bit more complicated then you’d initially think …
Combining Scroll-Driven Animations with @starting-style
Tag Archives: css
Combining Scroll-Driven Animations with
Solved by CSS Scroll State Queries: hide a header when scrolling down, show it again when scrolling up.
CSS @starting-style debugging is available in Chrome DevTools!
I built something that I needed into DevTools: debugging support for CSS @starting-style rules.
The CSS Podcast is back! And I’m a co-host now.
The CSS Podcast is back! Together with Una I’m co-hosting season 5 of the show, and we have some good episodes coming your way …
A custom --light-dark() function in CSS that works with any type of value (not just colors!) in just 3 LOC
Web animations today and tomorrow (Google I/O 2025)
For this year’s Google I/O, I recorded the session “Web animations today and tomorrow”. Check it out to learn how to guide, inform, and delight users by adding subtle and supportive animations to your web UIs.
View Transitions Applied: Smoothly animating a border-radius with a View Transition, revisited
Instead of duplicating an animation on the ::view-transition-group pseudo, you can also rely on CSS transitions on the original element … if you’ve set it up correctly.
Polyfilling CSS with CSS Parser Extensions
In April I attended #BlinkOn, the conference for web platform contributors in the Chromium open source project. At the conference I gave a presentation about “CSS Parser Extensions”, a wild idea I have to fix CSS polyfilling once and for all.
If you didn’t know, polyfilling CSS features is extremely hard, mainly because the CSS Parser discards what it does not understand. So what if, instead of having authors write their own parser and cascade to polyfill a CSS feature, they could teach the parser some new tricks?
Solved by StyleObserver: Element.matchContainer()
Martin Winkler published a package that polyfills Element.matchContainer to get notified in script when a Container Query matches/unmatches. Under the hood, it uses a StyleObserver.
CSS @function + CSS if() = 🤯
Support for Nested Container Queries and the CSS if() function inside CSS Custom Functions make @function very powerful.