Nowadays people are accustomed to seeing animation on the internet. Whether it be through GIFs, CSS animations, SVGs, WebGL or another form of animation, we're used to seeing things moving.
This blog will be a complete breakdown of CSS animations for email. Part one will cover code, support, examples, and considerations for using them. If you're more interested in code breakdown, takeaway code and higher-end technical specifications keep your eyes peeled for part two of this blog.
What are CSS animations?
Animated CSS vs Animated GIFs - The Pros and Cons
I believe there is a time and place to use CSS animations and animated GIFs, but it may seem confusing at first. Let’s weigh up the pros and cons of using each type of animation.
+ Easy to create if you have the know-how
+ Show off products in restricted space
+ Good support across major email clients
- Outlook 2007/2010/2013/2016 will only show the first frame of the animation
– File size can be slow to load and eat into a subscriber’s data plan if viewed on a mobile
+ Lightweight and fast to load
+ Animations are much smoother compared to other methods of animating
+ Looks very good on high quality mobile screens
– Knowledge required on how to create and troubleshoot
– Limited client support
As you can see, GIFs do have some advantages, but this guide will be focusing mainly on CSS animations. We'll show you how to handle the negatives and use CSS animations to their maximum potential.
Considerations before using CSS Animations
CSS animations aren’t going to meet all email needs, so it's important you consider all the points below before diving in.
Time is a very important factor when considering making any changes to your email campaigns. We need to consider how much time it's going to create a CSS animation:
- Will the animation be complex and take many hours to create? If so, consider the use of animated GIFs.
- Will the animation take a lot of time to test across different platforms?
That being said, you can definitely mitigate these time issues by creating an animation "framework." Every time you create a cool new CSS animation, whether it be a spinning icon, items re-arranging themselves, or a subtle hover animation on CTA, consider saving the animation code by itself. That way you can create a reusable library of animations you can pull into your email campaigns. This is an example of modular design, which can really speed up email development.
Perhaps the most important consideration is your subscriber base. CSS animations are supported across a mix of different email clients. However, if you're dealing with a primarily a B2B subscriber base you'll definitely want to check the device your subscribers open on. If only 10% of your list open on a device or email client that will support CSS animations you may want to use an animated GIF instead.
If you're wondering what the support for CSS animations is like, you can use this handy list.
Android Native Mail ✓
Outlook 2002/2003 ❌
Outlook 2007/2010/2013/2016 ❌
Outlook for Mac ✓
Apple Mail ✓
Windows Phone 7 ❌
Office 365 ❌
Gmail App ❌
AOL Mail ❌
How you use your animations
Though less technical, this is still a serious consideration for anyone who wants to try using CSS animations in their email!
Think carefully about how you're actually going to use your animations. I believe that this kind of enhancement needs to be done for a reason. I once heard that "Design for the sake of design is mess," and I run with the same principle here.
If you're using flashy animations in every email campaign just to use animations, chances are you're going to either lose your original message or desensitise people to the animations, thereby reducing their effectiveness in future campaigns. Luckily, below I have some clever examples of how to use CSS animation to enhance your emails.
Examples of CSS animation
This fantastic Halloween email was created by UK agency 1973 for Seagate. They created an amazing animation, moving the ghost sprites on an arc to have the effect of them flying down the email.
They also wrote an excellent blog on how they created this animation, which I'd highly encourage reading.
Another example coming out of the UK is this email by the creative email agency known as display block. They've used a few different animation styles to include a bit of motion in their email.
By moving a background layer behind an image they create the effect of a scrolling iPhone:
Here they move the heart up and down, almost making it look like a beating heart:
I encourage checking out the original email, it's full of both animated CSS and animated GIFs that create a really nice effect.
Table TR TD
Table TR TD, a fantastic little email blog - check it out, created this amazing email. They use a mixture of clever timing and good use of colour to create this incredible dripping style for their email.
Note: All of these examples are relying on animated GIFs for me to show you how the animation looks, I'd highly encourage viewing the original emails to see the beautiful animations.
Keep your eyes peeled for Part Two!
Part two to this blog will be coming out soon. In part two I'll be digging into the actual code, showing what you can and can't do and even giving some nice little code takeaways for you to drop straight into your email campaigns!