How to use CSS3 Animation in email

Although support for CSS in email clients is patchy at best (and a nightmare at worst) we can still use some of the newest features provided by CSS3 as long as we can provide suitable alternatives for the less capable inboxes.

Here is an example of a special call to action that will not only animate but also display fully even when images are turned off.

How it’s done

This CSS must be placed in your html documents head as internal CSS it will not work if it is put inline. Vendor prefixes have been used for the gradient to ensure it displays in iCloud Mail no matter what web browser is used. The animation will only work in iOS devices so I have only used the -webkit prefix.

              

The HTML for the button <a> must sit within a table cell to fix a padding bug in Outlook. I also included much of the CSS for the button inline to ensure the colour, border and text would be formatted correctly even in less capable email clients.

              

A note on support

This code will not display the same in every inbox.  It will create a button of roughly the same size but the animation and other style features will change across different email clients.

iOS5, iCloud Mail
CSS3 border-radius, gradient & box-shadow. Animations work!



Thunderbird 9
CSS3 border-radius & gradient



Gmail, Hotmail
CSS3 border-radius & gradient



Outlook 2010, Yahoo! Mail
CSS3 border-radius & gradient