April 15th, 2014
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.
Follow along with the example on codepen!
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!