The CSS animation-trigger property allows you to delay the start of a CSS animation until a specific trigger occurs.

animation-trigger originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.