Click to Sign Up for a 7 Day Free Trial!

Email Development

The Ultimate Email CSS Animation Guide: Part 1

Email On Acid

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?

Animation is a CSS property that allows us to animate individual HTML elements such as img, span and div. This eliminates the need to use an external scripting language such as JavaScript or Flash, which are not supported in email. It also eliminates the need to generate animated GIFs. 


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.

Animated GIFs

+ 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


CSS Animations

+ 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

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.

Subscriber base

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.

iOS
Android Native Mail
Gmail
Outlook.com
Outlook 2002/2003
Outlook 2007/2010/2013/2016
Outlook for Mac
Apple Mail
Yahoo!
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

Seagate

Halloween Email

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.

display block

Original Email Link

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

Original Email Link

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!

About the Author

Alex Ilhan

Alex Ilhan

Hailing all the way from England, Alex brings his email development expertise along with an endless stream of cups of tea and British cynicism.

Join the Discussion

Looking forward to reading more on this, Alex. CSS animations definitely have their place in email, when implemented well. Saw a really nice one from B&Q a few months back, the sort of animation I can see being added to a library for quick use in future.
Jaina
Actually all the windows phones should support CSS animation. You just need to add this meta tag to the email
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
Hacker

Leave a Comment