CSS Animation in Email – Falling Image Effect

by | Aug 19, 2019 | Code Samples, Email Development, Email Interactivity | 0 comments

Snowflake and confetti animation screencapture

One way to support engagement in emails is to add ambient animations as a design enhancement. These will not work in all email clients, but are supported on most mobile devices and clients. As of March 2019 and according to my testing using Email on Acid and assorted live accounts, the CSS snow animation is supported on all iOS and OSX devices, including Outlook on OSX, and It is not supported on any other version of Outlook, AOL, Yahoo or on any gmail client (including gmail on iOS). It does not show at all on most of these clients, but Outlook.com and Office 365 will display the images used in the animation at the top of the email. Alternatively, you can leave the images visible as a decoration.

You can view the live example of the snowflake and confetti animation here: https://portfolio.coyoteholmberg.com/email-code/email-code-snowflake-animation.html

Here’s the same animation but with hearts instead of snowflakes:

You can view a sample of the live effect with a hearts animation here: https://portfolio.coyoteholmberg.com/email-code/email-code-heart-animation.html

The code uses a media query to detect the clients that will support the animation.


@media screen and (-webkit-min-device-pixel-ratio: 0) {
}

I wanted to hide the images on Outlook web clients, so I targeted Outlook.com and Outlook 365 by using a CSS element called [owa] (Outlook Web Access), which is part of both of those clients.


/* hide snow animation on Outlook.com */
[owa]
 .hidesnow {display: none; height: 1px;}

CSS:

<style>
/* +++++ pure CSS snow animation */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
/*positioning */
.snowcontainer {
position:relative;
width:100%;
overflow:visible;
}
/* all animated elements are absolute - relative to the container div */
.dots,
.dots-large,
.snowimage1,
.snowimage2,
.snowimage3,
.snowimage4,
.snowimage5 {position:absolute;} 

/*CSS snow dots */
.dots {
border-radius: 9px;
height: 14px;
width: 14px;
top: -20px;
background-color: #fff;
}
.dots-large {
border-radius: 9px;
height: 18px;
width: 18px;
top: -20px;
background-color: #fff;
}
/*default color */
.dots {background-color: #ffffff;}

/*animated sprites - snowflakes*/
.snowimage1 {
height:30px;
width:30px;
/* Where animation starts */
top:-20px;
background-image:url('https://image.email.americangreetings.com/lib/feea1378716d0d/m/1/Snowflakes_30x30_01.png');
}
.snowimage2 {
background-image:url('https://image.email.americangreetings.com/lib/feea1378716d0d/m/1/Snowflakes_30x30_02.png');
/* size of image */
height:30px;
width:30px;
/* Where animation starts */
top:-20px;
}
.snowimage3 {
background-image:url('https://image.email.americangreetings.com/lib/feea1378716d0d/m/1/Snowflakes_20x20_02.png');
/* size of image */
height:20px;
width:20px;
/* Where animation starts */
top:-20px;
}
.snowimage4 {
background-image:url('https://image.email.americangreetings.com/lib/feea1378716d0d/m/1/Snowflakes_20x20_01.png');
/* size of image */
height:20px;
width:20px;
/* Where animation starts */
top:-20px;
}
.snowimage5 {
background-image:url('https://image.email.americangreetings.com/lib/feea1378716d0d/m/1/Snowflakes_30x30_03.png');
height:30px;
width:30px;
/* Where animation starts */
top:-20px;
}

/* animation: Name of animation / length of animation / timing function (linear= same speed from beginning to end) / delay (time between animation end and start) / number of times */
/* sprite animations are numbered, with numbers corresponding to the sprite number. "snow 1". CSS shapes are lettered: "snowA" */
.snow1 {animation: snow1 5s linear 0s infinite;}
.snow2 {animation: snow2 6s linear 1s infinite;}
.snow3 {animation: snow3 7s linear 2s infinite;}
.snow4 {animation: snow4 8s linear 2s infinite;}
.snow5 {animation: snow5 5s linear 1s infinite;}

@keyframes snow1
{
0% { top:0%;left:20%; }
100% { top:100%;left:40%; }

}
@keyframes snow2
{
0% { top:0%;left:30%; }
100% { top:100%;left:25%; }
}
@keyframes snow3
{
0% { top:0%;left:40%; }
100% { top:100%;left:50%; }
}
@keyframes snow4
{
0% { top:0%;left:50%; }
100% { top:100%;left:65%; }
}
@keyframes snow5
{
0% { top:0%;left:80%; }
100% { top:100%;left:60%; }
}

/* CSS shapes animations */
.snowA {animation: snowA 5s linear 0s infinite;}
.snowB {animation: snowB 6s linear 1s infinite;}
.snowC {animation: snowC 7s linear 2s infinite;}
.snowD {animation: snowD 8s linear 2s infinite;}
.snowE {animation: snowE 5s linear 3s infinite;}
.snowE {animation: snowE 6s linear 3s infinite;}
.snowF {animation: snowC 7s linear 2s infinite;}
@keyframes snowA
{
0% { top:0%;left:25%; }
100% { top:100%;left:35%; }
}
@keyframes snowB
{
0% { top:0%;left:45%; }
100% { top:100%;left:65%; }
}
@keyframes snowC
{
0% { top:0%;left:65%; }
100% { top:100%;left:85%; }
}
@keyframes snowD
{
0% { top:0%;left:85%; }
100% { top:100%;left:75%; }
}
@keyframes snowE
{
0% { top:0%;left:23%; }
100% { top:100%;left:13%; }
}
@keyframes snowF
{
0% { top:0%;left:73%; }
100% { top:100%;left:53%; }
}
 /* hide snow animation on Outlook.com */
.hidesnow {display: none; height: 1px;}
}
/*end snow animation */
</style>

HTML:

<!-- +++++ snow animation wrapper -->
<div class="snowcontainer">
<!-- hide this on Outlook -->
<div class="hidesnow">
<!-- snow animation elements - need to separate image drops from snowfall animation, so they don't stick together -->
<div class="snowimage1 snow1"></div>
<div class="snowimage2 snow2"></div>
<div class="snowimage3 snow3"></div>
<div class="snowimage4 snow4"></div>
<div class="snowimage5 snow5"></div>
<div class="dots dotsA snowA"></div>
<div class="dots dotsB snowB"></div>
<div class="dots dotsC snowC"></div>
<div class="dots dotsD snowD"></div>
<div class="dots dotsE snowE"></div>
<div class="dots dotsF snowF"></div>
<!-- end snow animation elements -->
</div>
<!-- end snow animation top wrapper -->
<!-- placeholder image -->
<img src="https://image.email.americangreetings.com/lib/feea1378716d0d/m/1/640x600-hero-snow-ani.png" alt=" " width="100%" border="0" align="top" class="full-width-image" style="display:block;" ></a> 
 <!-- +++++ close snow animation wrapper -->
</div>
<!-- end snow animation close wrapper -->

Resources:
Oram, Jay. “How to Create a Falling Snow Effect in Your Email.” Email On Acid, 3 Dec. 2018,
www.emailonacid.com/blog/article/email-development/how-to-add-an-animated-snow-effect-to-your-holiday-email-campaigns/

“Email CSS Animation – moving sprites on an arc.”, 1973Ltd.com, 13 Jan. 2016,
1973ltd.com/blog/css-animations-moving-sprites-on-an-arc/

“Target Outlook.com using the [owa] Element”, HTML Email Check, 2018,
www.htmlemailcheck.com/knowledge-base/target-outlook-com-using-owa-element/