Mobile Menu

Hope everyone is having a wonderful holiday season. While visiting Washington this holiday season, we ran into a little snow, which is rare/exciting for us. So I decided to post this tutorial with resources that will allow you to make a simple snowfall animation with only CSS.

What we will be making

See the Pen myPzXz by Chris Allen (@Christopherallen) on CodePen.

Resources

http://cpallen.com/wp-content/uploads/2014/12/snow1.png
http://cpallen.com/wp-content/uploads/2014/12/snow2.png

Here are the two square png files that we will use for our background. Save them and store them with your image files. If you wish, feel free to make your own snowflakes. I made mine in Illustrator by making one snowflake and copying it numerous times, while changing the size and opacity. Overall the second background image has smaller flakes with less opacity. I did this to get the feel that it is further back than the first background image.

Setting up the snowflakes

In your CSS, you are going to add this:

Here all we have done is declared the background color and our two background images. For this tutorial I have implemented it to the body, but you are able to put this on a background image with any element.

Something to keep in mind is that snow1 image is 500px by 500px and snow2 is 400px by 400px. These sizes can change, but keep in what they are because it will come into play later when we are positioning are CSS.

Also you are not restricted to just two backgrounds. CSS multiple backgrounds have great support, so feel free to go wild with your backgrounds.

Your background should now look something like this:

snowfall-progress

Declaring the animation

In our body selector, below our background image we will now call the animation with all the different prefixes.

Implementing the animation

Now that we have declared the animation name to be snow and that it will run for 20 seconds at an infinite loop it is time to tell the animation what to do during those 20 seconds.

Your snow flakes should now be animating across the screen. We are doing this by changing the first background image position to 500px by 1000px at the end of the animation loop. This allows for our 500px by 500px image to flow at a nice speed. Next we call the second background image to position at 400px by 400px. This creates a slower animation in the background.

Remember When I said to keep in mind the size of your square background image? This is where that comes into play. Notice how the x coordinate is the size of my square backgrounds. This keeps the animation smooth. Try modifying that x coordinate and you will notice a jump in your snowflakes every 20 seconds.

Conclusion

Now that you have a complete animation, I challenge you to fork me on codepen and improve it with your own touch.

Also check out these links which I learned and gained inspiration from:

http://designshack.net/?p=27674
http://cssdeck.com/labs/css3-snow

Chris Allen

Chris is a front-end developer based in Seattle, WA where he works at Fresh Consulting. He use his knowledge and skills of various programming languages and web standards in hopes to help provide a user-friendly web experience.