Using CSS animations in email
Animations in email templates are starting to pick up pace. Once only used or seen sparingly, now almost every big brand is using them in their email campaigns, and for the most part they’re using them well.
More often than not, these animations will be in the format of GIFs, the age-old animated file format, that can be created, optimised and used with ease in recent years.
Using GIFs isn’t the only way to get animation in your emails, as the use of CSS animations are becoming more and more widespread in the email community.
CSS or GIF?
Before jumping headfirst into the world of using CSS animations in emails, you probably want to consider whether or not this is the right approach for you.
GIFs are more widely used, and it is easy to see why this is. They’re easier to create, requiring much less time and resource than CSS animations, and they also require less technical know-how. The majority of email clients support the use of GIFs, meaning that your images should look and perform pretty much the same across all clients and devices , although you should be wary of how Outlook may render your GIFs. They’re also useful for eCommerce businesses to highlight and promote their products and services.
The benefits of using CSS for your animations is that the filesize will be much smaller than that of a GIF, meaning that it will load in a fraction of the time. This is especially useful and important if the majority of your recipients are opening your emails on their mobile devices. You’ll most likely be leaning towards CSS if you want your animations to look smooth, as this is where the limitations of using GIFs can really become apparent.
Essentially, you need to make sure that you’re not looking at using CSS because you want to, but because you need to.
A few notes on using CSS animations in email
If you have decided to use CSS animations over GIFs in your emails, you need to be aware that this will take longer to produce and to implement, and that it will be harder to make any changes to ensure that the animation performs as it should on all clients and devices.
Don’t let this put you off though, as when done well CSS animation in email looks great, even on screens with high resolutions.
A good starting point for using CSS in your email would be creating an interactive CTA button, as this is a smaller job than trying to build an all singing, all dancing banner image, and will be easier to modify to display well across all clients.
To learn what some of the key figures and experts in the email marketing field think about using animation in email, download our Email Marketing Trends 2017 Report.