CSS Animations: The way to Use Them in HTML Emails

Your group desires the following e-mail marketing campaign you code to face out from the gang, and so they’ve requested you for an improve on easy static photographs. Now it’s your transfer on find out how to implement animated emails. In any case, you possibly can select from so many alternative choices, like animated GIFs or CSS animations. We’ve talked about utilizing GIF animations in e-mail advertising campaigns elsewhere, so we’ll deal with CSS animations on this article.

Let’s begin from the fundamentals, like professionals and cons, help, and a few CSS animation examples in emails. Then we’ll wrap up with some code tutorials.

What are CSS animations?

You should use CSS animations to create numerous animations – from spinning icons to refined hover animations on a Name to Motion (CTA) button. However what precisely are CSS animations?

CSS animations consult with the animation property of Cascading Type Sheets (CSS). This animation property permits us to animate particular person HTML parts like img, span, and div by utilizing solely the CSS and HTML that’s already a part of an HTML e-mail template. In different phrases, CSS animations eradicate the necessity to use an exterior scripting language akin to JavaScript or Flash, which aren’t supported in e-mail. For e-mail builders, which means we are able to use it as an enhancement for e-mail shoppers that help CSS.

CSS animations additionally eradicate the necessity to generate animated GIFs. When you’re undecided why that is necessary, learn on! We’ll dive into that within the part beneath.

What’s the distinction between CSS animations and animated GIFs?

Whereas cool animated GIFs have lengthy been a cornerstone of e-mail design, CSS animations can step up and fill within the gaps the place GIFs lag behind. Let’s have a look at a comparability between the 2 sorts of animation:

As you possibly can see, each GIFs and CSS animations have their professionals and cons. This information focuses on CSS animations, however you possibly can try this text to be taught extra about utilizing GIFs in emails. Beneath, we’ll unpack a few of the professionals and cons about CSS animations listed above and present you find out how to harness their energy.

What are some professionals of utilizing CSS animations in emails?

We briefly in contrast CSS animations and GIFs above, however let’s dive into the advantages in additional element:

CSS animations are nice for emails as a result of they:

• Load quick
• Seize your subscriber’s consideration
• Can help you inject some creativity into your e-mail

Let’s unpack every of those beneath.

Why do CSS animations load sooner than GIFs?

CSS animations are comparatively light-weight and small when it comes to file measurement in comparison with GIFs. That signifies that CSS animations will load sooner than GIFs.

As any e-mail marketer will let you know, subscribers don’t have a protracted consideration span. Velocity is of the essence. Your subscriber may get bored with ready for a GIF that masses slowly and will get caught on the primary body. In actual fact, they could even shut out of your e-mail earlier than they’ve even seen your well-crafted animation. However fast-loading, light-weight CSS animations can shortly seize your subscriber’s consideration. Don’t miss out on conversions because of a sluggish load time!

How do CSS animations seize a subscriber’s consideration?

Our eyes are drawn to motion, and animation in emails is not any exception to this evolutionary rule. Try the next CSS animation from show block, a artistic e-mail company, and inform us it doesn’t seize your consideration straight away:

How do CSS animations permit e-mail designers to boost emails?

You won’t be an e-mail designer, but it surely’s good to recollect why CSS animations matter to different members in your group. As an illustration, CSS animations are a good way to boost a boring e-mail and inject the feel and appear of your model at a look.

Try the CSS animation instance from above. Not solely does the bouncing coronary heart shortly seize your consideration, but it surely additionally provides a artistic contact. Doesn’t it nearly appear to be a handshake?

What are some drawbacks of utilizing CSS animations?

Whereas there are various advantages to utilizing CSS animations, they’re not the proper software for each e-mail scenario. Some issues and potential drawbacks to utilizing CSS animations embody:

• Repeating animations
• Delaying animations
• Scroll-based/scroll-triggered animation
• Not seen to each subscriber

What do these imply? Let’s dig into every consideration beneath.

Can CSS animations help repeating animations? 

One main downside of CSS animations is the dearth of e-mail help for the animation-iteration-count property. This property allows us to regulate the variety of instances an animation repeats. Which means we are able to both have an animation repeat as soon as or infinitely. It’s a reasonably heavy downside, however there are nonetheless plenty of wonderful animations you are able to do in emails with steady looping.

As well as, try how pseudo-classes can assist you restart CSS animations.

Can CSS animations do delayed animations?

One other downside is the dearth of help for the animation-delay property. That is the CSS snippet that enables us to delay how lengthy earlier than an animation triggers and begins. Which means all our animations will begin as quickly as the e-mail masses.

Can CSS animations do scroll-based or scroll-triggered animation?

Sadly, CSS animations can’t do scroll-based or scroll-triggered animations. These methods use jQuery (a sub-branch of JavaScript) to deal with scroll-based triggers to name within the CSS animations. It’s a good looking approach, however everyone knows the pitfalls of making an attempt to get JavaScript to work in an e-mail!

How a lot time do you must create your e-mail marketing campaign?

Time is a vital issue when making modifications to your e-mail campaigns. As an illustration:

• Will the animation be advanced and take many hours to create? If that’s the case, think about using animated GIFs.
• Will the animation take quite a lot of time to check throughout completely different platforms?

At Electronic mail on Acid by Sinch, we’ve bought your cross-platform testing wants coated. So if you happen to’re involved in regards to the latter, try our Marketing campaign Precheck software.

You too can mitigate time points by creating an animation “framework.” Each time you create a cool new CSS animation, think about saving the animation code by itself. That means, you possibly can construct a reusable library of animations you possibly can pull into your e-mail campaigns. That is an instance of modular design, which might actually velocity up e-mail growth.

What e-mail shoppers help CSS animations?

Maybe an important consideration is your subscriber base. CSS animation functionalities are supported throughout a mixture of completely different e-mail shoppers. Nevertheless, if you happen to’re dealing primarily with a B2B subscriber base, you’ll positively wish to know your subscriber’s system. If solely 10% of your listing opens on a tool or e-mail shopper that helps CSS animations, you could wish to use an e-mail GIF as a substitute. In any case, our objective is to optimize the person expertise, and extra e-mail shoppers might help GIFs than CSS animations.

Try the next desk to see if an e-mail shopper helps CSS animations.

For different e-mail shoppers, try the full listing from Can I Electronic mail.

How can I exploit CSS animations in emails?

Now that we’ve gone by way of some CSS animation fundamentals, let’s have a look at two examples of find out how to use CSS animations to boost e-mail campaigns.

Seagate’s Halloween e-mail

Try the next Halloween e-mail from Seagate. Discover how the artistic company behind this e-mail used CSS animations to create the impact of ghosts flying down the e-mail. Discuss spooky.

show block

Artistic e-mail company show block used a number of completely different CSS animation kinds to incorporate a little bit of movement within the instance beneath.

By transferring a background layer behind a picture, they create the impact of a scrolling iPhone:

What are some CSS animation methods?

As e-mail builders, we’re used to having restricted help for net methods in e-mail, and, sadly, CSS animations are not any exception. Try the next code snippets for a number of methods so as to add CSS animation to emails with not less than average help.

When you want a refresher, check out our CSS fundamentals tutorial.

Rotate

rotate is likely one of the commonest CSS animation methods round. A easy rotate can add lots to your e-mail approach.

Right here’s what we’re going to attain:

The next code handles the animation above:

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); remodel:rotate(360deg); } }

Let’s have a look at what’s happening right here. We’ll begin with the next:

remodel:rotate(360deg);

This snippet controls the animation. It’s fairly easy, however we’re merely telling the browser to “remodel” the CSS ingredient. The remodel we’re calling in is the rotate transformation, and we’re going to rotate it 360 levels.

Then, the remainder of the code merely covers completely different browsers and e-mail shoppers. As you possibly can see, we’re focusing on Mozilla shoppers, WebKit shoppers and non Webkit shoppers alike.

Now that we’ve arrange the CSS animation, we are able to merely declare it for the ingredient(s) we want to animate. Create a category and name the animation we created (named “spin”) with the next code:

.spin {
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}

We’ve known as the animation for Mozilla, WebKit, and non-WebKit shoppers. All we’re doing right here is telling the browser that for any ingredient with the category spin utilized to it, we wish to name our animation and have it spin for 4 seconds for an infinite loop.

Fading

On this tutorial, we’ll use the identical ideas as above to create a fading animation. That is what we’re going for:

We’ll goal the three primary completely different browser sorts to make sure our code seems in each potential customer it might probably.

@-webkit-keyframes fade {
0%   { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0;}
}

@-moz-keyframes fade {
0%   { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0;}
}

@keyframes fade {
0%   { opacity: 0; }
50%  { opacity: 1; }
100% { opacity: 0;}
}

The massive distinction right here is that we’ve thrown in some additional keyframes. All this implies is that at 0% of the animation cycle, the opacity is ready to “0,” that means it’s absolutely clear. Then, at 50% (or midway by way of the animation), the opacity shall be “1,” or absolutely opaque. Then, at 100% of the animation cycle, the animation is ready to “0” opacity once more.

Utilizing this keyframe methodology, we are able to management precisely what we would like our animation to do and when. By having it begin and finish on 0 opacity, we create a pleasant fading loop.

We name our animation precisely the identical means as we did for the rotation:

.fade {
-webkit-animation:fade 3s linear infinite;
-moz-animation:fade 3s linear infinite;
animation:fade 3s linear infinite;
}

Simulated “Loading Bar”

Ever wished to make a loading bar? Let’s learn the way by utilizing a sequence of adjusting background colours to imitate the impact of a loading bar, like so:

As this code is a bit longer and a bit extra difficult, we’ve put it onto Codepen in order to not fill the web page. We’ll reference the code to dig into it beneath, however try the full working code right here.

Principally, what we’re doing right here is creating 5 completely different animations. Every has 5 phases of animation:

We colour every field black to create this impact at a unique stage of the animation. For instance, the primary field has this:

0% { background: #000000}
25% { background: #ffffff }
50% { background: #ffffff }
75% { background: #ffffff }
100% { background: #ffffff }

For the primary 25% of the animation cycle, we’re saying we would like the field to have a black background colour.

On the third field, we have now the identical type of factor, however the cycle modifications the field to black on the third 25% of the animation:

0% { background: #ffffff}
25% { background: #ffffff }
50% { background: #000000 }
75% { background: #ffffff }
100% { background: #ffffff }

When you have a look at the complete code, you’ll additionally discover we nonetheless ensure to focus on the three browser sorts – therefore why the code is so lengthy!

Background animations

A very highly effective characteristic we have now entry to is the flexibility to animate backgrounds. That is certainly one of our favourite methods so as to add refined animations to present your emails an edge with out worrying about fallbacks. When it doesn’t animate, it simply appears to be like like an everyday background.

That is the impact we’ll be creating:

Try the working code pattern earlier than you get began.

So how will we create this wonderful impact? Once more, it’s all about getting your head round what’s supported and find out how to use keyframe animations.

Within the code, we inform the background picture to scroll to a pixel worth that’s both in a optimistic or unfavourable route from the place to begin of the background:

@keyframes animatedBackground {
0% { background-position: 650px 0; }
100% { background-position: 0 0; }
}

@-moz-keyframes animatedBackground {
0% { background-position: 650px 0; }
100% { background-position: 0 0; }
}

@-webkit-keyframes animatedBackground {
0% { background-position: 650px 0; }
100% { background-position: 0 0; }
}

We are able to modify this additional by including photographs/textual content on prime of the scrolling background to create intelligent animations just like the artistic firm show block did above.

How can I make certain my CSS animations will work?

As we talked about earlier than, CSS animations have restricted help throughout e-mail shoppers. Whereas it’s attainable to create fallbacks, how will you make certain your e-mail will look as you meant?

At Electronic mail on Acid, we wish to say, “Don’t guess, take a look at!” Allow us to allow you to ship your greatest e-mail utilizing our Marketing campaign Precheck software. This characteristic can assist you:

• Preview your e-mail on main shoppers
• Validate your hyperlinks
• Verify your spelling
• Collaborate through Staff Administration instruments to make the evaluate and QA course of organized, streamlined, and environment friendly

Why depart the success of your CSS animations as much as likelihood when you possibly can see how your e-mail will seem to your subscribers throughout main e-mail shoppers?

That’s a wrap

CSS animations and animated GIFs are nice methods to boost your emails. Assist your e-mail entrepreneurs and designers create emails that stand out from the competitors.

Able to get began? Take Electronic mail on Acid for a free trial spin for seven days, and allow us to allow you to get sending now.

This text was up to date on July 7, 2022. It first printed in June of 2016.

Creator: The Electronic mail on Acid Staff

The Electronic mail on Acid content material group is made up of digital entrepreneurs, content material creators, and straight-up e-mail geeks.

Join with us on LinkedIn, comply with us on Fb, and tweet at @EmailonAcid on Twitter for extra candy stuff and nice convos on e-mail advertising.

Creator: The Electronic mail on Acid Staff

The Electronic mail on Acid content material group is made up of digital entrepreneurs, content material creators, and straight-up e-mail geeks.

Join with us on LinkedIn, comply with us on Fb, and tweet at @EmailonAcid on Twitter for extra candy stuff and nice convos on e-mail advertising.