CSS Animations: Use Them in HTML Emails

Your workforce desires the following e-mail marketing campaign you code to face out from the group, and so they’ve requested you for an improve on easy static photos. Now it’s your transfer on tips on how to implement animated emails. In spite of everything, you may select from so many various choices, like animated GIFs or CSS animations. We’ve talked about utilizing GIF animations in e-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, help, 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 numerous animations – from spinning icons to refined hover animations on a Name to Motion (CTA) button. However what precisely are CSS animations?

CSS animations discuss 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 through the use of 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 resembling JavaScript or Flash, which aren’t supported in e-mail. For e-mail builders, which means we will 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 take a look at a comparability between the 2 kinds of animation:

As you may see, each GIFs and CSS animations have their professionals and cons. This information focuses on CSS animations, however you may take a look at this text to be taught extra about utilizing GIFs in emails. Beneath, we’ll unpack among the professionals and cons about CSS animations listed above and present you tips on 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
• Mean you can inject some creativity into your e-mail

Let’s unpack every of those beneath.

Why do CSS animations load quicker than GIFs?

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

As any e-mail marketer will let you know, subscribers don’t have an extended 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. The truth is, they may 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 rapidly 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. Take a look at the next CSS animation from show block, a inventive e-mail company, and inform us it doesn’t seize your consideration instantly:

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

You won’t be an e-mail designer, nevertheless it’s good to recollect why CSS animations matter to different members in your workforce. As an example, CSS animations are a good way to boost a boring e-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 rapidly seize your consideration, nevertheless it additionally provides a inventive contact. Doesn’t it virtually 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 right instrument for each e-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 help repeating animations? 

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

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

Can CSS animations do delayed animations?

One other disadvantage is the dearth of help for the animation-delay property. That is the CSS snippet that permits us to delay how lengthy earlier than an animation triggers and begins. Meaning 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 exquisite method, however everyone knows the pitfalls of attempting to get JavaScript to work in an e-mail!

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

Time is an important issue when making adjustments to your e-mail campaigns. As an example:

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

At E-mail on Acid by Sinch, we’ve received your cross-platform testing wants coated. So for those who’re involved in regards to the latter, take a look at our Marketing campaign Precheck instrument.

You can too 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 may construct a reusable library of animations you may 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 totally different e-mail shoppers. Nevertheless, for those who’re dealing primarily with a B2B subscriber base, you’ll positively need to know your subscriber’s gadget. If solely 10% of your checklist opens on a tool or e-mail consumer that helps CSS animations, you could need to use an e-mail GIF as a substitute. In spite of everything, our purpose is to optimize the person expertise, and extra e-mail shoppers might help GIFs than CSS animations.

Take a look at the next desk to see if an e-mail consumer helps CSS animations.

For different e-mail shoppers, take a look at the full checklist from Can I E-mail.

How can I take advantage of CSS animations in emails?

Now that we’ve gone by some CSS animation fundamentals, let’s take a look at two examples of tips on how to use CSS animations to reinforce e-mail campaigns.

Seagate’s Halloween e-mail

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

show block

Inventive e-mail company show block used just a few totally different CSS animation types 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 strategies?

As e-mail builders, we’re used to having restricted help for internet strategies in e-mail, and, sadly, CSS animations aren’t any exception. Take a look at the next code snippets for just a few methods so as to add CSS animation to emails with at the least average help.

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

Rotate

rotate is likely one of the commonest CSS animation strategies round. A easy rotate can add quite a bit to your e-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 happening 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 component. 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 e-mail shoppers. As you may see, we’re concentrating 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 component(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 component 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 totally different browser sorts to make sure our code seems in each potential customer it may well.

@-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 additional 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 the animation), the opacity will probably be “1,” or absolutely 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 through the use of a sequence of fixing 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 take a look at the full working code right here.

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

We shade 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 shade.

On the third field, we’ve got the identical form of factor, however the cycle adjustments 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 take a look at the total code, you’ll additionally discover we nonetheless be certain to focus on the three browser sorts – therefore why the code is so lengthy!

Background animations

A extremely highly effective function we’ve got entry to is the power to animate backgrounds. That is considered one of our favourite methods so as to add refined animations to provide your emails an edge with out worrying about fallbacks. When it doesn’t animate, it simply seems 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 wonderful impact? Once more, it’s all about getting your head round what’s supported and tips on 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 destructive 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 prime of the scrolling background to create intelligent animations just like the inventive firm show block did above.

How can I be certain my CSS animations will work?

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

At E-mail on Acid, we prefer to say, “Don’t guess, check!” Allow us to make it easier to ship your greatest e-mail utilizing our Marketing campaign Precheck instrument. This function will help you:

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

Why go away the success of your CSS animations as much as probability when you may 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 reinforce your emails. Assist your e-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 make it easier to get sending now.

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

Creator: The E-mail on Acid Staff

The E-mail on Acid content material workforce is made up of digital entrepreneurs, content material creators, and straight-up e-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 e-mail advertising and marketing.

Creator: The E-mail on Acid Staff

The E-mail on Acid content material workforce is made up of digital entrepreneurs, content material creators, and straight-up e-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 e-mail advertising and marketing.