Awesome CSS3 animated header

You can now create stunning animations with CSS3. But, I bet you know that. The keyword when it comes about CSS3 animations is the CSS3 @keyframes rule and in this article you will learn how to create an awesome CSS3 animated header using it.

CSS3 animated header

View demo

… also, you can download the .psd concept.

The HTML

The markup is minimal and quite self explanatory. Please, don’t blame me for divitis. :)

<div class="header">
<div class="wrapper">
<div class="christmas-tree tree1"></div>
<div class="christmas-tree tree2"></div>
<div class="christmas-tree tree3"></div>
<div class="snowman"></div>
<div class="christmas-tree tree4"></div>
<div class="christmas-tree tree5"></div>
<div class="christmas-tree tree6"></div>
</div>
</div>

Image resources

Below, you can find the images you will use in order to create the header:

Header images

The CSS

As you read at the beginning of this article, the @keyframes rule does all the magic. Also, to keep the following code as clean as possible, I will not add the prefixed versions too (-moz-, -webkit-, -ms-).

You can find the full CSS3 code when viewing page source for the demo.

Header background

To achieve the snow effect, you will need to animate the background-position property for the first .header background. As a quick note, for the browsers that do not support multiple backgrounds, the snow will not be visible for this example.

.header{
margin: 0 0 30px;
background: url(header-bg.png);
background: url(snow-bg.png) repeat-y center, url(header-bg.png);
animation: animate-snow 9s linear infinite;
}

@keyframes animate-snow
{
0% { background-position: center 0, 0 0;}
100% { background-position: center 885px, 0 0;}
}

Header wrapper

The .wrapper element basically holds all our Christmas trees together with the snowman. Please note the position: relative declaration:

.wrapper{
width: 960px;
height: 315px;
margin: auto;
overflow: hidden;
position: relative;
background: url(wrapper-bg.png) no-repeat bottom;
}

Animated header example

For the Christmas trees, the animation-duration value was randomly changed in order to create a cool effect:

@keyframes animate-drop {   
0% {opacity:0;transform: translate(0, -315px);}
100% {opacity:1;transform: translate(0, 0);}
}

.christmas-tree,
.snowman {
position: absolute;
animation: animate-drop 1s linear;
}

.christmas-tree {
width: 112px;
height: 137px;
background: url(christmas-tree.png);
}

.snowman {
width: 115px;
height: 103px;
top: 195px;
left: 415px;
background: url(snowman.png);
animation-duration: .6s;
}

.tree1 {
top: 165px;
left: 35px;
animation-duration: .6s;
}

.tree2 {
left: 185px;
top: 175px;
animation-duration: .9s;
}

.tree3 {
left: 340px;
top: 125px;
animation-duration: .7s;
}

.tree4 {
left: 555px;
top: 155px;
animation-duration: .8s;
}

.tree5 {
left: 710px;
top: 170px;
animation-duration: .7s;
}

.tree6 {
left: 855px;
top: 125px;
animation-duration: .6s;
}

Browser support

Here’s the support at this time: Firefox 5+, IE 10+, Chrome 6+, Safari 5+. For non-supported browsers, you don’t have to worry, everything will be just fine as long as you provide decent fallbacks.

Why to use animations?

Simple answer: to draw the user’s attention. Get inspired by another example, here is one of my previous articles, where I also used CSS3 keyframes: Cool notification messages with CSS3 & jQuery.

Happy Holidays!

We’re getting close to New Year’s and, with this article, I want to wish you all the best and Happy Holidays. Thank you all for reading my articles!