Ding ding. We’re in for a fight night treat today as two big powers are squaring off. In the blue corner, we have animated GIFs and in the red corner, we have CSS animations. It’s time to find out who the heavy-weight champ is.

Animated GIFs

In the blue corner, weighing in at anywhere between 50kb to 3mb we have the stalwart of email marketing, the animated GIF. Long have animated GIFs (pronounced gif, not jif!) been used in email marketing. They are an excellent way to draw attention to a specific area of an email or add a bit of life to an email. Just take a look at this example by Boden:

I love animated GIFs, but they’re not without their pitfalls. The pros and cons of using them in your emails include;

+ Easy to create if you have the know-how
+ Good support across most email clients
+ Show off products (for example, a product from different angles) in limited space
– File size can be slow to load and eat into a subscriber’s data plan if viewed on a mobile

You should also take into consideration how much you are using animated GIFs in your campaigns. If you’re using too many and too often, your subscribers could end up desensitised and the impact will be lost. You also need to take into account your subscriber base, if you have large amount of mobile openers, they may not want to be downloading 1mb GIFs on their 3g per month data plan.

Neither are animated GIFs a universal experience as not every email client supports them;

*Only displays first frame

Here are some more examples of different ways animated GIFs can be used

CSS Animation

In the red corner, weighing in at… well, basically nothing, we have title contender; CSS animation. CSS animation is becoming more prevalent in web design due to the increase in browser support.

To view an example, click here and scroll down to the Deployment section

I’ve been using more CSS animations in our display block emails recently. As we did with the GIFs, lets take a look at the pros and cons of using CSS animations;

+ Lightweight and quick to load
+ Animations are much smoother
+ Looks very good on high quality mobile screens
– Knowledge required on how to create and troubleshoot
– Limited client support

Speaking of support, which email clients support CSS animation?

“This is cool, but how do I make them?” I hear you cry. Going back to the example from our own email, it’s some simple (once you know it!) CSS code to add in your emails.

First off, we’ll define our keyframes for the animation;

@-moz-keyframes swing{
0%{-moz-transform:rotate(-3deg)}
50%{-moz-transform:rotate(3deg)}
100%{-moz-transform:rotate(-3deg)}
}

It may look daunting but all we’re telling the client here is that at 0% of the animation we’re rotated to -3 degrees, at 50% we’ll rotate it to 3 degrees, and at 100% we’ll go back to -3. Then we duplicate it but change the selector to target webkit devices:

@-webkit-keyframes swing{
0%{-webkit-transform:rotate(-3deg)}
50%{-webkit-transform:rotate(3deg)}
100%{-webkit-transform:rotate(-3deg)}
}

Finally we’re going to pull it all in;

.swing {
-moz-animation: 1s ease 0s normal none infinite swing;
-moz-transform-origin: center top;
-webkit-animation:swing 1s infinite ease-in-out;
-webkit-transform-origin:top;
}

Here, we’re defining the class of .swing to add to the element we want to make swing, with the keyframe animation we set up before set to last for 1 second and loop infinitely. If you’re looking for some cool CSS animations to add to your campaigns check out Animated.css

And we have a winner…

After 12 furious rounds the winner is… email marketing! No, seriously, having both of these options available makes email the true winner in this battle. The truth is that both animated GIFs and CSS animations can work completely in tandem. There is no right or wrong place to use either of these techniques. The decision should be made on a case-by-case basis looking at the goal of your animation, your subscriber base, and other important factors.

If you have any questions or want to talk more about animation in email feel free to leave a comment below, or reach out on Twitter.