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.
