CSS Animations: How one can Use Them in HTML Emails

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

Let’s begin from the fundamentals, like execs 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 delicate hover animations on a Name to Motion (CTA) button. However what precisely are CSS animations?

CSS animations consult with the animation property of Cascading Model Sheets (CSS). This animation property permits us to animate particular person HTML components 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 eradicate the necessity to use an exterior scripting language comparable to JavaScript or Flash, which aren’t supported in electronic mail. For electronic mail builders, which means we will use it as an enhancement for electronic mail shoppers that assist CSS.

CSS animations additionally eradicate the necessity to generate animated GIFs. For those who’re unsure 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 electronic mail design, CSS animations can step up and fill within the gaps the place GIFs lag behind. Let’s take a look at a comparability between the 2 kinds of animation:

As you may see, each GIFs and CSS animations have their execs and cons. This information focuses on CSS animations, however you may try this text to be taught extra about utilizing GIFs in emails. Under, we’ll unpack among the execs and cons about CSS animations listed above and present you methods to harness their energy.

What are some execs 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
• Mean you can inject some creativity into your electronic mail

Let’s unpack every of those beneath.

Why do CSS animations load quicker than GIFs?

CSS animations are comparatively light-weight and small by way of file dimension in comparison with GIFs. That signifies that CSS animations will load quicker than GIFs.

As any electronic mail marketer will let you know, subscribers don’t have a protracted consideration span. Pace is of the essence. Your subscriber may get uninterested in ready for a GIF that hundreds slowly and will get caught on the primary body. Actually, 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 shortly seize your subscriber’s consideration. Don’t miss out on conversions as a result 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. Take a look at the next CSS animation from show block, a artistic electronic mail company, and inform us it doesn’t seize your consideration straight away:

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 appear and feel of your model at a look.

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

What are some drawbacks of utilizing CSS animations?

Whereas there are numerous advantages to utilizing CSS animations, they’re not the right device for each electronic mail scenario. Some concerns 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 assist repeating animations? 

One main disadvantage of CSS animations is the shortage of electronic mail assist for the animation-iteration-count property. This property permits us to manage the variety of instances an animation repeats. Which means we will both have an animation repeat as soon as or infinitely. It’s a fairly heavy disadvantage, however there are nonetheless a lot of wonderful animations you are able to do in emails with steady looping.

As well as, try how pseudo-classes will 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 permits 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 hundreds.

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 a lovely method, however everyone knows the pitfalls of attempting to get JavaScript to work in an electronic mail!

How a lot time do it’s important to create your electronic mail marketing campaign?

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

• Will the animation be advanced and take many hours to create? In that case, take into account using animated GIFs.
• Will the animation take loads of time to check throughout totally different platforms?

At Sinch E-mail on Acid, we’ve acquired your cross-platform testing wants coated. So should you’re involved in regards to the latter, try our Marketing campaign Precheck device.

You too can 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 may construct a reusable library of animations you may pull into your electronic mail campaigns. That is an instance of modular design, which may actually pace up electronic mail improvement.

What electronic mail shoppers assist CSS animations?

Maybe an important consideration is your subscriber base. CSS animation functionalities are supported throughout a mixture of totally different electronic mail shoppers. Nonetheless, should you’re dealing primarily with a B2B subscriber base, you’ll positively wish to know your subscriber’s machine. If solely 10% of your checklist opens on a tool or electronic mail consumer that helps CSS animations, it’s possible you’ll wish to use an electronic mail GIF as a substitute. In spite of everything, 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 consumer helps CSS animations.

For different electronic mail shoppers, try the full checklist from Can I E-mail.

How can I exploit CSS animations in emails?

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

Seagate’s Halloween electronic mail

Take a look at the next Halloween electronic mail from Seagate. Discover how the artistic 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 totally different CSS animation kinds to incorporate a little bit of movement within the instance beneath.

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 very least reasonable assist.

For those who want a refresher, check out our CSS fundamentals tutorial.

Rotate

rotate is among the most typical CSS animation strategies round. A easy rotate can add so much to your electronic mail method.

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); rework:rotate(360deg); } }

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

rework:rotate(360deg);

This snippet controls the animation. It’s fairly easy, however we’re merely telling the browser to “rework” the CSS aspect. The rework 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 totally different browsers and electronic mail shoppers. As you may see, we’re focusing on Mozilla shoppers, WebKit shoppers and non Webkit shoppers alike.

Now that we’ve arrange the CSS animation, we will 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 known 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 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 rules as above to create a fading animation. That is what we’re going for:

We’ll goal the three fundamental totally different browser sorts to make sure our code seems in each possible 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 further keyframes. All this implies is that at 0% of the animation cycle, the opacity is about to “0,” which means it’s totally clear. Then, at 50% (or midway by way of the animation), the opacity might be “1,” or totally opaque. Then, at 100% of the animation cycle, the animation is about to “0” opacity once more.

Utilizing this keyframe technique, we will 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 needed to make a loading bar? Let’s find out how 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 sophisticated, 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.

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

We colour every field black to create this impact at a distinct 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’ve the identical form 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 }

For those who take a look at the total 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 extremely highly effective characteristic we’ve entry to is the flexibility to animate backgrounds. That is one among our favourite methods so as to add delicate animations to offer your emails an edge with out worrying about fallbacks. When it doesn’t animate, it simply seems like an everyday 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 wonderful 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 optimistic or damaging course 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 photos/textual content on high 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 assist throughout electronic mail shoppers. Whereas it’s potential to create fallbacks, how are you going to make certain your electronic mail will look as you meant?

At E-mail on Acid, we prefer to say, “Don’t guess, check!” Allow us to show you how to ship your finest electronic mail utilizing our Marketing campaign Precheck device. This characteristic will help you:

• Preview your electronic mail on main shoppers
• Validate your hyperlinks
• Test your spelling
• Collaborate by way of Crew Administration instruments to make the assessment and QA course of organized, streamlined, and environment friendly

Why go away the success of your CSS animations as much as likelihood when you may 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 boost your emails. Assist your electronic mail entrepreneurs and designers create emails that stand out from the competitors.

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

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

Writer: The E-mail on Acid Crew

The E-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, comply with us on Fb, and tweet at @EmailonAcid on Twitter for extra candy stuff and nice convos on electronic mail advertising.

Writer: The E-mail on Acid Crew

The E-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, comply with us on Fb, and tweet at @EmailonAcid on Twitter for extra candy stuff and nice convos on electronic mail advertising.