<\/center><\/p>\n
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. <\/p>\n
There are many excellent tutorials on CSS animations<\/a> on the Web so we’ll skip to the email specific parts.<\/p>\n From the bottom of this kinetic email support chart<\/a>, you can see only the Webkit based email clients with the addition of Windows 8.1 support animations. 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.<\/p>\n 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:<\/p>\n 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.<\/p>\n In general, there are four prefixes The code with a vendor prefix for webkit would look like this:<\/p>\n 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 Here’s the email client matrix of selector declaration type by email clients that support CSS Animations<\/p>\n Email Clients that support CSS Animation<\/b><\/p>\n 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 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.<\/p>\n 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? :)<\/p>\n For those of you who are taking advantage of Gmail’s limited <style> support<\/a>, 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.
<\/p>\nCSS Animation Support in Email.<\/h4>\n
.mybox{ animation: opacityanim 5s linear 2s infinite alternate; }\r\n\r\n@keyframes opacityanim {\r\n 0% { opacity: 1; }\r\n 100% { opacity: 0;}\r\n}\r\n<\/pre>\n-webkit<\/code> for webkit based browsers (Safari, Chrome, iOS & Android), -ms<\/code> for Internet Explorer, -moz<\/code> for Firefox and -o<\/code> for Opera.<\/p>\n.mybox{ -webkit-animation: opacityanim 5s linear 2s infinite alternate; }\r\n\r\n@-webkit-keyframes opacityanim {\r\n 0% { opacity: 1; }\r\n 100% { opacity: 0;}\r\n}\r\n<\/pre>\n-webkit-<\/code> vendor prefix.<\/p>\n\n
\n Email client<\/b><\/td>\n Animation selector<\/b><\/td>\n<\/tr>\n \n iOS<\/td>\n -webkit, regular<\/td>\n<\/tr>\n \n Apple Mail<\/td>\n -webkit<\/td>\n<\/tr>\n \n Android 4.4<\/td>\n -webkit<\/td>\n<\/tr>\n \n Windows 8.1<\/td>\n -webkit<\/b>, -ms, regular<\/td>\n<\/tr>\n<\/table>\n -webkit<\/code> vendor prefix. Surprisingly the Windows 8.1 client responds to CSS animation and transform selectors with the -webkit<\/code> vendor prefix!
<\/p>\nUsing Media Queries to Limit Animation Related CSS<\/h4>\n
@media screen and (-webkit-min-device-pixel-ratio: 0) {\r\n ... animation related styles ...\r\n}\r\n<\/pre>\n
<\/p>\nA Note About Gmail<\/h4>\n
<\/p>\nExamples<\/h4>\n