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

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 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!

Paul Edge
Paul Edge
At Pure360 I have gained a strong knowledge of email marketing best practices, including segmentation, deliverability, data cleansing and optimising performance including subject line testing, message content, setting up email nurturing programmes and sending targeted offers.
Recent Posts
Sign up to our newsletter

Start typing and press Enter to search

cart-abandonmentclick-through-rate