It’s episode three of All The Right Moves! This time around, the topic is CSS Animation and Progressive Enhancement. Any time we animate content into view from offscreen, we run the risk of having that content left out of view forever when animations aren’t supported. Yikes!
In this episode I show you the easiest way I’ve found to avoid this, using the concept of Progressive Enhancement and a cute kitten.
If you missed the second episode, Modular CSS Animations, check out the whole series of All The Right Moves on vimeo.
Tutorial Links:
Follow along with the example on codepen!
Tutorial Summary:
Setting an initial visible position for content that’s intended to be animated in will make it visible by default if animation is not supported.
By keeping all the movement properties in the CSS keyframes themselves, we keep the animation nicely separate from the content. The animation will be seen when it is supported, but it won’t interfere when it’s not.
This isn’t the only way out there to implement CSS animations as Progressive Enhancement, but it’s the easiest one I’ve found. It only takes a little bit of thinking ahead, and it might save you massive amounts of time over other more complex solutions!
