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.
… also, you can download the .psd concept.
The markup is minimal and quite self explanatory. Please, don’t blame me for divitis. :)
Below, you can find the images you will use in order to create the header:
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 (
You can find the full CSS3 code when viewing page source for the demo.
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.
.wrapper element basically holds all our Christmas trees together with the snowman. Please note the
position: relative declaration:
For the Christmas trees, the
animation-duration value was randomly changed in order to create a cool effect:
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.
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!
Meet the CSS4 selectors
RTD's top 10 most read articles of 2011