CSS animations are animations that are built using code\u2014specifically HTML and CSS. Using a handful of CSS properties, email marketers can manipulate the HTML of their campaigns and create a similar sense of motion as when using animated GIFs. Perhaps more importantly, they can create more interactive and engaging campaigns, too.<\/p>\n
In this guide, we\u2019ll explore the pros and cons of using CSS animations in email, as well as the code that powers CSS animations.<\/p>\n
Why use CSS animations?<\/h2>\n
CSS animations have been around for years, but are only recently seeing wider use both in the web and email industries. For a long time, animation on the web was created either in a proprietary tool like Adobe Flash or Microsoft Silverlight or as an animated GIF<\/a>\u2014an image format that allows for frame-based animations. Since email clients never really supported the use of Flash or Silverlight in the inbox, email marketers were left using animated GIFs if they wanted movement in their campaigns.<\/p>\n This is largely still the case. According to our 2018 State of Email Survey<\/a>, 78% of brands use animated GIFs in their campaigns, whereas only 30% use CSS animations.<\/p>\n Although animated GIFs have wider support, CSS animations have a number of benefits when used properly.<\/p>\n One of the biggest benefits of CSS animations is that they create faster loading emails compared to using an animated GIF. As more and more emails are read on mobile, email marketers need to contend with subscribers using limited bandwidth and small data plans. Animated GIFs tend to be on the heavier side when it comes to file weights, and can be slow to load and display on mobile devices. CSS animations, however, are code. Being text-based, they are quick to load and play smoothly on most modern devices. They are a great way to create an engaging user experience without cutting into users\u2019 expensive data plans.<\/p>\n Perhaps the most important benefit of using CSS animations is that they allow you to create more interactive experiences for subscribers. Since CSS animations can be tied to specific user behaviors\u2014like hovering over a CTA or tapping on an element in an email\u2014they can be used to cycle through content and different visual states of a campaign.<\/p>\n Although CSS animations use only a few core CSS properties, those properties can be used to create extremely powerful and impressive email campaigns.<\/p>\n At the heart of CSS animations are two key concepts: transitions and keyframe animations. Using these two concepts, you can create everything from a simple hover effect on buttons to more complex animations that are triggered in an interactive email<\/a>.<\/p>\n CSS transitions do exactly what the name implies: They transition an element from one state to another, animating that element in the process. The best way to understand a CSS transition is by looking at an example.<\/p>\n Let\u2019s say we have a call-to-action button with a simple hover effect that switches between two background colors.<\/p>\n See the Pen CSS Animations in Email: Example 1<\/a> by Jason Rodriguez (@rodriguezcommaj<\/a>) on CodePen<\/a>.<\/p>\n![\"\"](\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/css-animations-1.png\")
![\"\"](\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/css-animations-3.png\")
<\/figure>\nTwo Types of Animation<\/h2>\n
Transitions<\/h3>\n