In the email for the launch of Litmus’ new Processed HTML feature, CSS animation was used to show off the functionality. The goal behind this implementation was to immediately show users how to use the feature.

The email features a fixed timed CSS animation for WebKit "desktop" clients (Apple Mail, iOS Mail on iPad, and Outlook for Mac, which accounts for ~30% of Litmus' audience) and falls back to an animated GIF of the feature for all other clients.

The animated GIF was the base experience that displayed by default and the CSS animation was toggled on using this media query:

@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-width: 600px) { /* CSS animation styles */ }

You can learn more about WebKit targeting and progressive enhancement in this blog post.

Standard CSS keyframes were used to create the animation on a timeline. Switching the visual elements in the CSS animation was made possible by absolutely positioning the elements and changing their respective z-index to hide and show them. Elements "hidden" by default were simply positioned as background layers with a lower z-index behind the main content. Layer positions were swapped with higher or lower z-indexes with CSS keyframes as needed. Positioning and z-index were necessary since CSS animation cannot change display none and opacity doesn't remove elements' visual space.

A "replay" function was made available for users to rewatch the animation. This was achieved by using a checkbox and duplicating the animation styles to be enabled when the checkbox was checked.

So, for example, if .foo has animation: foo 1s; with @keyframes foo then for the checkbox behavior a styling of #replay:checked ~* .foo { animation: foo2 1s; } was used where @keyframes foo styling was duplicated into @keyframes foo2.

Additionally, a tracking pixel was added to the replay checkbox behavior to see how many users were watching the replay of the CSS animation.