Your staff needs the following electronic mail marketing campaign you code to face out from the gang, they usually’ve requested you for an improve on easy static photos. Now it’s your transfer on how one can implement animated emails. In spite of everything, you’ll be able to 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 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 should use CSS animations to create numerous animations – from spinning icons to delicate hover animations on a Name to Motion (CTA) button. However what precisely are CSS animations?
CSS animations check with the animation property of Cascading Fashion Sheets (CSS). This animation property permits us to animate particular person HTML components like img, span, and div through the use of solely the CSS and HTML that’s already a part of an HTML electronic mail template. In different phrases, CSS animations get rid of the necessity to use an exterior scripting language reminiscent of 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 get rid of 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 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 varieties of animation:
| Animated GIFs | CSS Animations |
| Simple to create by way of websites like Giphy | Require extra information to create and troubleshoot |
| Sluggish loading velocity | Light-weight and masses quick |
| Good assist throughout main electronic mail shoppers | Restricted shopper assist |
| Are likely to lag and lack the sleek look of CSS animations as the photographs go body by body | Look superb on high-quality cell gadgets |
| Picture-based | Code-based |
As you’ll be able to see, each GIFs and CSS animations have their execs and cons. This information focuses on CSS animations, however you’ll be able to take a look at this text to study extra about utilizing GIFs in emails. Beneath, we’ll unpack a few of the execs and cons about CSS animations listed above and present you how one can 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 measurement 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 would possibly get uninterested in ready for a GIF that masses slowly and will get caught on the primary body. In truth, they could 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 on account of a sluggish load time!
How do CSS animations seize a subscriber’s consideration?
Our eyes are drawn to motion, and animation in emails isn’t 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 may not be an electronic mail designer, nevertheless it’s good to recollect why CSS animations matter to different members in your staff. As an example, CSS animations are a good 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 shortly seize your consideration, nevertheless it additionally provides a inventive contact. Doesn’t it nearly seem like a handshake?
What are some drawbacks of utilizing CSS animations?
Whereas there are lots of advantages to utilizing CSS animations, they’re not the right instrument for each electronic mail state of affairs. 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 are able to both have an animation repeat as soon as or infinitely. It is 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 can assist 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 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 a stupendous method, however everyone knows the pitfalls of making an attempt to get JavaScript to work in an electronic mail!
How a lot time do it’s a must to create your electronic mail marketing campaign?
Time is an important issue when making adjustments to your electronic mail campaigns. As an example:
- Will the animation be advanced and take many hours to create? In that case, think about the usage of animated GIFs.
- Will the animation take numerous time to check throughout totally different platforms?
At Sinch E-mail on Acid, we’ve bought 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’ll be able to construct a reusable library of animations you’ll be able to pull into your electronic mail campaigns. That is an instance of modular design, which may actually velocity up electronic mail growth.
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, for those who’re dealing primarily with a B2B subscriber base, you’ll positively need to know your subscriber’s system. If solely 10% of your record opens on a tool or electronic mail shopper that helps CSS animations, it’s possible you’ll need to use an electronic mail GIF as an alternative. In spite of everything, our objective is to optimize the consumer expertise, and extra electronic mail shoppers might assist GIFs than CSS animations.
Take a look at the next desk to see if an electronic mail shopper helps CSS animations.
| E-mail shopper | Supported? |
| Apple Mail | Sure |
| Gmail | No |
| Microsoft Outlook (besides macOS) | No |
| Microsoft Outlook (macOS 2011, 2016) | Sure |
| Yahoo! Mail | No |
| AOL | No |
| Samsung E-mail | Sure |
| Mozilla Thunderbird | Sure |
For different electronic mail shoppers, take a look at the full record 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 how one can 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 inventive company behind this electronic mail used CSS animations to create the impact of ghosts flying down the e-mail. Discuss spooky.
show block
Artistic electronic mail company show block used just a few 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 internet strategies in electronic 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 no less than reasonable assist.
When you want a refresher, check out our CSS fundamentals tutorial.
Rotate
rotate is without doubt one of the most typical CSS animation strategies round. A easy rotate can add lots to your electronic mail method.
Right here’s what we’re going to realize:
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 take 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 component. 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 totally different browsers and electronic mail shoppers. As you’ll be able to 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 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 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 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 ideas as above to create a fading animation. That is what we’re going for:
We’ll goal the three predominant totally different browser varieties to make sure our code seems in each possible customer it will 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 will probably be “1,” or totally 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 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 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 take a look at the full working code right here.
Principally, 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 have now 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 complete code, you’ll additionally discover we nonetheless make sure that to focus on the three browser varieties – therefore why the code is so lengthy!
Background animations
A extremely highly effective function we have now entry to is the power to animate backgrounds. That is one in all 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 appears 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 will we create this wonderful impact? Once more, it’s all about getting your head round what’s supported and how one can use keyframe animations.
Within the code, we inform the background picture to scroll to a pixel worth that’s both in a constructive or unfavorable course from the start line 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 assist throughout electronic mail shoppers. Whereas it’s potential to create fallbacks, how will you be certain your electronic mail will look as you supposed?
At E-mail on Acid, we wish to say, “Don’t guess, check!” Allow us to assist you to ship your greatest electronic mail utilizing our Marketing campaign Precheck instrument. This function can assist you:
- Preview your electronic mail on main shoppers
- Validate your hyperlinks
- Verify your spelling
- Collaborate by way of Group Administration instruments to make the evaluate and QA course of organized, streamlined, and environment friendly
Why go away the success of your CSS animations as much as likelihood when you’ll be able to 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 assist you to get sending now.
This text was up to date on July 7, 2022. It first printed in June of 2016.
