CSS Animations: Use Them in HTML Emails

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

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

What are CSS animations?

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

CSS animations seek advice from the animation property of Cascading Model 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 electronic mail template. In different phrases, CSS animations remove the necessity to use an exterior scripting language corresponding to JavaScript or Flash, which aren’t supported in electronic mail. For electronic mail builders, which means we are able to use it as an enhancement for electronic mail shoppers that assist CSS.

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

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

Whereas cool animated GIFs have lengthy been a cornerstone of electronic 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 take a look at 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 methods 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
• Let you inject some creativity into your electronic mail

Let’s unpack every of those under.

Why do CSS animations load sooner than GIFs?

CSS animations are comparatively light-weight and small by way of file measurement in comparison with GIFs. That implies that CSS animations will load sooner than GIFs.

As any electronic mail marketer will let you know, subscribers don’t have an extended consideration span. Velocity is of the essence. Your subscriber would possibly get bored with ready for a GIF that masses slowly and will get caught on the primary body. The truth is, they may even shut out of your electronic mail earlier than they’ve even seen your well-crafted animation. However fast-loading, light-weight CSS animations can rapidly seize your subscriber’s consideration. Don’t miss out on conversions because of a gradual 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. Take a look at the next CSS animation from show block, a inventive electronic mail company, and inform us it doesn’t seize your consideration instantly:

How do CSS animations enable electronic mail designers to boost emails?

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

Take a look at the CSS animation instance from above. Not solely does the bouncing coronary heart rapidly seize your consideration, however it additionally provides a inventive contact. Doesn’t it virtually appear like a handshake?

What are some drawbacks of utilizing CSS animations?

Whereas there are various advantages to utilizing CSS animations, they’re not the right instrument for each electronic 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 under.

Can CSS animations assist repeating animations? 

One main disadvantage of CSS animations is the shortage of electronic mail assist for the animation-iteration-count property. This property allows us to manage 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 disadvantage, however there are nonetheless a number of superb animations you are able to do in emails with steady looping.

As well as, take a look at how pseudo-classes may help you restart CSS animations.

Can CSS animations do delayed animations?

One other disadvantage is the shortage of assist 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 strategies use jQuery (a sub-branch of JavaScript) to deal with scroll-based triggers to name within the CSS animations. It’s an attractive approach, however everyone knows the pitfalls of attempting to get JavaScript to work in an electronic mail!

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

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

• Will the animation be complicated and take many hours to create? If that’s the case, take into account using animated GIFs.
• Will the animation take lots of time to check throughout completely different platforms?

At Electronic mail on Acid by Sinch, we’ve obtained your cross-platform testing wants lined. So when you’re involved concerning the latter, take a look at our Marketing campaign Precheck instrument.

You may as well mitigate time points by creating an animation “framework.” Each time you create a cool new CSS animation, take into account saving the animation code by itself. That means, you possibly can construct a reusable library of animations you possibly can pull into your electronic mail campaigns. That is an instance of modular design, which might actually velocity up electronic mail improvement.

What electronic mail shoppers assist CSS animations?

Maybe a very powerful consideration is your subscriber base. CSS animation functionalities are supported throughout a mixture of completely different electronic mail shoppers. Nevertheless, when you’re dealing primarily with a B2B subscriber base, you’ll undoubtedly need to know your subscriber’s system. If solely 10% of your listing opens on a tool or electronic mail shopper that helps CSS animations, chances are you’ll need to use an electronic mail GIF as a substitute. In any case, our purpose is to optimize the person expertise, and extra electronic mail shoppers could assist GIFs than CSS animations.

Take a look at the next desk to see if an electronic mail shopper helps CSS animations.

For different electronic mail shoppers, take a look at the full listing from Can I Electronic mail.

How can I take advantage of CSS animations in emails?

Now that we’ve gone by means of some CSS animation fundamentals, let’s have a look at two examples of methods to use CSS animations to reinforce electronic mail campaigns.

Seagate’s Halloween electronic mail

Take a look at the next Halloween electronic mail from Seagate. Discover how the inventive company behind this electronic mail used CSS animations to create the impact of ghosts flying down the e-mail. Discuss spooky.

show block

Inventive electronic mail company show block used a couple of completely different CSS animation types to incorporate a little bit of movement within the instance under.

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

What are some CSS animation strategies?

As electronic mail builders, we’re used to having restricted assist for net strategies in electronic mail, and, sadly, CSS animations aren’t any exception. Take a look at the next code snippets for a couple of methods so as to add CSS animation to emails with at the least reasonable assist.

If you happen to want a refresher, check out our CSS fundamentals tutorial.

Rotate

rotate is likely one of the most typical CSS animation strategies round. A easy rotate can add lots to your electronic 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 occurring 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 aspect. 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 electronic mail shoppers. As you possibly can see, we’re concentrating 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 aspect(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 referred to as the animation for Mozilla, WebKit, and non-WebKit shoppers. All we’re doing right here is telling the browser that for any aspect with the category spin utilized to it, we need to name our animation and have it spin for 4 seconds for an infinite loop.

Fading

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

We’ll goal the three most important completely different browser varieties to make sure our code seems in each potential customer it will possibly.

@-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 large distinction right here is that we’ve thrown in some further keyframes. All this implies is that at 0% of the animation cycle, the opacity is about to “0,” which means it’s absolutely clear. Then, at 50% (or midway by means of the animation), the opacity shall be “1,” or absolutely opaque. Then, at 100% of the animation cycle, the animation is about to “0” opacity once more.

Utilizing this keyframe methodology, we are able to management precisely what we wish 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 needed 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 under, however take a look at the full working code right here.

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

We coloration every field black to create this impact at a special 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 wish the field to have a black background coloration.

On the third field, now we have 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 }

If you happen to have a look at the total code, you’ll additionally discover we nonetheless ensure to focus on the three browser varieties – therefore why the code is so lengthy!

Background animations

A very highly effective function now we have 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 like a daily background.

That is the impact we’ll be creating:

Take a look at the working code pattern earlier than you get began.

So how can we create this superb impact? Once more, it’s all about getting your head round what’s supported and methods to use keyframe animations.

Within the code, we inform the background picture to scroll to a pixel worth that’s both in a constructive or detrimental path 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 high of the scrolling background to create intelligent animations just like the inventive firm show block did above.

How can I ensure my CSS animations will work?

As we talked about earlier than, CSS animations have restricted assist throughout electronic mail shoppers. Whereas it’s doable to create fallbacks, how will you ensure your electronic mail will look as you supposed?

At Electronic mail on Acid, we prefer to say, “Don’t guess, check!” Allow us to assist you ship your greatest electronic mail utilizing our Marketing campaign Precheck instrument. This function may help you:

• Preview your electronic mail on main shoppers
• Validate your hyperlinks
• Examine your spelling
• Collaborate through Workforce Administration instruments to make the assessment 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 electronic mail will seem to your subscribers throughout main electronic mail shoppers?

That’s a wrap

CSS animations and animated GIFs are nice methods to reinforce your emails. Assist your electronic 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 assist you get sending now.

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

Creator: The Electronic mail on Acid Workforce

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

Join with us on LinkedIn, observe us on Fb, and tweet at @EmailonAcid on Twitter for extra candy stuff and nice convos on electronic mail advertising and marketing.

Creator: The Electronic mail on Acid Workforce

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

Join with us on LinkedIn, observe us on Fb, and tweet at @EmailonAcid on Twitter for extra candy stuff and nice convos on electronic mail advertising and marketing.