Although CSS animations are only supported by modern email clients, used strategically CSS animations can bring a level of flair and sophistication to your email.

There are many excellent tutorials on CSS animations on the Web so we’ll skip to the email specific parts.

From the bottom of this kinetic email support chart, you can see only the Webkit based email clients with the addition of Windows 8.1 support animations.

CSS Animation Support in Email.

Animations allow you to transition styles of an element from one state to another over a period of time – say moving an element from one point to another, rotating the element or making it appear and disappear gradually.

The basic components of CSS animation are the animation selector and @keyframes. For example with the code below, after a delay of 2 seconds the “mybox” element will hide and display over a period of 5 seconds repeatedly:

.mybox{ animation: opacityanim 5s linear 2s infinite alternate; }

@keyframes opacityanim {
 0% { opacity: 1; }
  100% { opacity: 0;}
}

Since animations were added to browsers when the CSS3 spec for animations was still not official some browsers require adding vendor prefixes to the declarations just in case the final spec is different.

In general, there are four prefixes -webkit for webkit based browsers (Safari, Chrome, iOS & Android), -ms for Internet Explorer, -moz for Firefox and -o for Opera.

The code with a vendor prefix for webkit would look like this:

.mybox{ -webkit-animation: opacityanim 5s linear 2s infinite alternate; }

@-webkit-keyframes opacityanim {
 0% { opacity: 1; }
  100% { opacity: 0;}
}

In reality though all modern browsers except Safari support vendor prefixes and the regular non-prefixed selectors for animation. In the land of email however, most Webkit based email clients only support animation selectors with the -webkit- vendor prefix.

Here’s the email client matrix of selector declaration type by email clients that support CSS Animations

Email Clients that support CSS Animation

As you can see the from the table above, the only selector we need to be concerned about when working on CSS animations in email is the one with the -webkit vendor prefix. Surprisingly the Windows 8.1 client responds to CSS animation and transform selectors with the -webkit vendor prefix!

Using Media Queries to Limit Animation Related CSS

Technically you don’t need to add any code to limit your animations to only those clients that support it. That’s the beauty of progressive enhancement. The clients that support animations would just perform them and those that don’t will ignore the declarations.

However if you want to style certain elements just for clients that support animation then putting all the animation related styles into this media query would do the trick. This would mean that your animations will no longer work in Windows 8.1, but who uses that client anyways, right? :)

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  ... animation related styles ...
}

A Note About Gmail

For those of you who are taking advantage of Gmail’s limited <style> support, make sure to place the Gmail related CSS in a separate <style> block at the top as the animation related declarations may cause the style block to get stripped by Gmail.

Examples

Here’s a post on CSS entrance effects in email.

If you come across some really cool examples of emails using animations, feel free to post a link to it in the comments!