How to Create a Festive Animated Email Header Using CSS Animation

Festive Animation

CSS Animation

Marketing Manager

Voted a Top 5 Influencer by Google Squared. Over 20 years of experience and loves sharing information and inside secrets learned through that time.

 

Reading Time: 6 minutes

Overview

  • Difficulty: Beginner
  • Tutorial estimation time: 3 mins
  • Program: Adobe Illustrator

In this article, we are going to look at how to create a festive animated email header using CSS animation.

This method could be used for many purposes, although we created this image as a header for an email campaign.

To use this method for other channels or purposes, you just need to change the sizes of the images that you are using. The code stays the same.

The benefits of creating an animation this way, rather than using a GIF, is that a large gif with the same duration would have a large file size.

In an email campaign this would be more likely to trigger spam filters and not be delivered. This is why we came across this approach. You may need to reduce file size for increasing webpage render times too though.

So let’s get onto the method!

Method

To create the animation, you will first need images to animate. For this guide we will be using image dimensions of 600 x 300 pixels.

Creating the images

This is the image we created for this guide.

 

 

We first need to separate the image into different layers which will be animated independently. We used Adobe Illustrator, but you can create your image in any image editing program that allows you to export transparent PNG files.

You can split the image into as many layers as you need, but we used 6 layers in this example, and used them in the following order:

    1. The Trees
    2. The Buildings
    3. Father Christmas
    4. The Hills
    5. The Clouds
    6. The Night Sky

And here are the images themselves:

The Trees

The Buildings

Father Christmas

The Hills

The Clouds

Night Sky

(We will be explaining how to create these images step by step in a new post which will be published shortly.)

Once you have exported each of these layers, you will need to upload them into a single folder for ease of use. If you are using this method for a website, you would save the images wherever you usually save your resources and website images.

Animating the images: The HTML and CSS coding part

Here is the HTML code that pulls the images together and animates them:

<html>
<style>
.xmas {
background: #cee0ed;
padding: 0;
margin:0;
height: 300px;
width: 640px;
}
.tree {
background: url(http://www.wiredplus.com/blog/imagesforblog/1.png) bottom center;
padding: 0;
height: 300px;
-moz-animation: bgscroll 200s infinite linear;
-ms-animation: bgscroll 200s infinite linear;
-o-animation: bgscroll 200s infinite linear;
-webkit-animation: bgscroll 200s infinite linear;
}
.town {
background: url(http://www.wiredplus.com/blog/imagesforblog/2.png) bottom center;
padding: 0;
height: 300px;
-moz-animation: bgscroll 400s infinite linear;
-ms-animation: bgscroll 400s infinite linear;
-o-animation: bgscroll 400s infinite linear;
-webkit-animation: bgscroll 400s infinite linear;
}.hills {
background: url(http://www.wiredplus.com/blog/imagesforblog/3.png) bottom center;
padding: 0;
height: 300px;
-moz-animation: bgscroll 600s infinite linear;
-ms-animation: bgscroll 600s infinite linear;
-o-animation: bgscroll 600s infinite linear;
-webkit-animation: bgscroll 600s infinite linear;
}
.santa {
background: url(http://www.wiredplus.com/blog/imagesforblog/santa2.png) bottom center repeat-x;
padding: 0;
margin:0;
height: 300px;
}
.cloud1 {
background: url(http://www.wiredplus.com/blog/imagesforblog/4.png) bottom center repeat-x;
padding: 0;
margin:0;
height: 300px;
border-bottom: 0 solid #cee0ed;
margin: auto auto;
vertical-align: middle;
}
.cloud2 {
background: #1D2635 url(http://www.wiredplus.com/blog/imagesforblog/5.png) bottom center repeat-x;
padding: 0;
margin:0;
height: 300px;
border-bottom: 0 solid #cee0ed;
margin: auto auto;
vertical-align: middle;
}
.cloud1 {
-moz-animation: bgscroll 800s infinite linear;
-ms-animation: bgscroll 800s infinite linear;
-o-animation: bgscroll 800s infinite linear;
-webkit-animation: bgscroll 800s infinite linear;
}
.cloud2 {
-moz-animation: bgscroll 1000s infinite linear;
-ms-animation: bgscroll 1000s infinite linear;
-o-animation: bgscroll 1000s infinite linear;
-webkit-animation: bgscroll 1000s infinite linear;
}
/* BEGIN ANIMATIONS */
@-webkit-keyframes bgscroll {
	from {background-position: 0 0;}
	to {background-position: -9999px 0;}
}
@-moz-keyframes bgscroll {
	from {background-position: 0 0;}
	to {background-position: -9999px 0;}
}
@-ms-keyframes bgscroll {
	from {background-position: 0 0;}
	to {background-position: -9999px 0;}
}
@-o-keyframes bgscroll {
	from {background-position: 0 0;}
	to {background-position: -9999px 0;}
}
@keyframes bgscroll {
	from {background-position: 0 0;}
	to {background-position: -9999px 0;}
}
  </style>
 <tbody>
                            <tr>
                                <td align="middle" >
                                    <div class="xmas"><div class="cloud2"><div class="cloud1"><div class ="santa"><div class ="hills"><div class="town"><div class="tree"></div></div></div></div></div></div></div>
                                  <!--[if mso]><img src="http://www.wiredplus.com/blog/imagesforblog/cloud2.png" width="640" style="width: 100%; min-height: auto; height: auto; display: block;" vedpw640" width="640"><![endif]-->
                                </td>
                            </tr>
                        </tbody>
</html>

This code consists of two halves; the creation of classes to dictate how the layers will animate, and display block so that the animation can display within the email.

Each layer’s specific class looks like this:

.example {

background: url(http://www.example.com/image) bottom center;

padding: 0;

height: 300px;

-moz-animation: bgscroll 200s infinite linear;

-ms-animation: bgscroll 200s infinite linear;

-o-animation: bgscroll 200s infinite linear;

-webkit-animation: bgscroll 200s infinite linear;

}

The highlighted elements are parts of the code which you can change:

.example
This is the class name. For ease of use this name should reflect the content of the image. In our example these classes are names .tree, .town, .santa etc.

The Image URL
This will be the URL for the image to be displayed within the template.

200s
This number controls the speed at which the layer will scroll. The higher the number the slower that layer will move.

The second section of code is what we will use to make the animation display in the template. Each class must be called using <div class=”example”>.

As you can see in the example code, the classes must be called starting with the back layer moving forward in order to ensure each layer is visible.

So there you have the codes and instructions to apply this animation to your own email campaigns.  If you would like to learn how to create isometric grids, check out our latest post.

Feel free to use it and share it, but don’t foget to link back to us.
Our designers have worked hard to create this for you!

For more email inspiration follow #dailyemailinspiration on Twitter and Facebook, or visit our blog.

We will be analysing email campaigns and offering insights daily and at the end of the week we will be recording a full round up of the week where we will be offering prizes for that week’s best email campaign – Catch the round ups on YouTube.

Marketing Manager

Voted a Top 5 Influencer by Google Squared. Over 20 years of experience and loves sharing information and inside secrets learned through that time.



1 Comment on "How to Create a Festive Animated Email Header Using CSS Animation"

    Leave a Reply

    All Posts