How To Add Snow Effect On Your Website Using CSS Keyframe Animations

css_code1The Holiday Christmas season is fast approaching. During this season, most of us think a specific thing to remember related to this season. Me, since im far from north and south hemisphere, I didnt experience one thing. SNOW!. So in this post, im going to show how to add snow effect on a website using CSS.

Getting Started: Background Images

Basically, we just need three transparent images of varying size with random dots on them. You can just use this images that i created for this post.

download_button

Applying the Backgrounds

Now, we are going to apply those images to our background in CSS. I will just use the body selector for this sample, feel free to apply them on a specific selector.

body {
	background-color: #00B2EE;
	background-image: url('snow.png'), url('snow3.png'), url('snow2.png');
}

Multiple backgrounds are supported on all browser, well older IE is exempted. As with just about everything else in advanced CSS, multiple backgrounds are supported in IE9, but nothing older than that. Hopefully the new IE auto update program will put an end to these.

Setting Up the Keyframes

@keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

/* Mozilla */
@-moz-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

/* Webkit */
@-webkit-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
 50% {background-color:#05EDFF;}
 100% {background-position: 500px 1000px, 400px 400px, 300px 300px; background-color:#00B2EE;}
}

/* IE */
@-ms-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

The Position Logic

The position of each image at the end of the animation may seem arbitrary, but in reality this is very intentional. In order to make the animation work right, you have to understand a few things.

The reason we’re using keyframe animations instead of the simpler and much better supported transition property is because we can loop a keyframe animation endlessly so it will continue to snow indefinitely. With this in mind, you have to remember that once a single instance of an animation has run its course, it’s going to start over. If you don’t position your images properly, you’ll see a blip at this point.

The trick is to utilize the size of your images to make sure the end frame matches the beginning frame, thus creating a seamless transition. For instance, my second background image was 400px by 400px, so I moved the background 400px down during the course of the animation, the same for my third image at 300px. For my first image I did something a little different. I wanted it to move faster so I doubled the height and moved it 1,000 pixels. Since this is a multiple of the height, the last frame will still match the first.

Also notice that I moved the horizontal position of the images as well. This adds a bit of wind into the equation so the snow isn’t falling perfectly vertically. If you want the snow to sway back and forth as it falls, simply add in a few more frames.

Implementing the Animation

Our final step is to return to the body selector and throw in browser specific propert to create an instance of the animation. First we state the name of the animation that we want to use, in this case “snow,” then we state the duration of the animation (20 seconds), next we choose a timing function (linear) and finally we loop the animation infinitely.

body {
	background-color: #00B2EE;
	background-image: url('snow.png'), url('snow3.png'), url('snow2.png');

/* Browser specific */
	-webkit-animation: snow 20s linear infinite;
	-moz-animation: snow 20s linear infinite;
	-ms-animation: snow 20s linear infinite;
	animation: snow 20s linear infinite;
}

css
That’s it. Now you have a nice snow effect in your website. Cool huh?

Here’s the files and source code that i use for this trick.

download_button

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s