A Scroll-Driven Animation… with a Duration

Chris Coyier Chris Coyier on

Ryan Mulligan digs into a Jhey Tompkins Pen and discovers a neat little trick involving two @keyframe animations. The first is a “trigger” animation that triggers when a certain element comes into view, and flips a --trigger custom property. Via a Style Query, that triggers the actual animation.

Why bother? Scroll-driven animation durations are, well… scroll… driven. This trick severs that, so you can do stuff like “when this element comes into view, run this little animation over 600ms”, entirely in CSS.

Wanna learn CSS from a course?

Frontend Masters logo

FYI, we have a full CSS learning path with multiple courses depending on how you want to approach it.

7-Day Free Trial

Leave a Reply

Your email address will not be published. Required fields are marked *

$839,000

Frontend Masters donates to open source projects through thanks.dev and Open Collective, as well as donates to non-profits like The Last Mile, Annie Canons, and Vets Who Code.