CSS3 Tricks: Falling Snow Animation with CSS only

CSS3 animations brought a whole new level of possibilities into the CSS world. So inspired by the current development in Game of Thrones (winter is finally here) I decided that in today’s tutorial, I will show you how to create a simple falling snow animation with CSS only. We made snow animations before, both in Flash and Javascript. We even created a simple WordPress plugin that adds the snowing effect to your website but it’s great to see that it’s possible to make it with CSS3 only. I already made a falling leaves animation with CSS3 only and since it’s very popular I decided to make a falling snow also.

We just developed our own free version of the Falling snow / leaves WordPress Plugin.

Falling Snow WordPress Plugins

For those of you that don’t want to play with code and would like to install a snow effect on your WordPress website, we prepared a list the best plugins.

• Snow Effects is a WordPress plugin add-on which displays Snow effects for the most popular Slider Revolution plugin.
• 5sec Snow is number 1 top selling Christmas / snow script on CodeCanyon! Updated for 2018!
• Snow 3D offers Advanced 3D realism and smooth animations. It has over 200 different snowflakes included.

CSS FALLING SNOW LIVE DEMO

Download Falling Snow Source Files

SETTING UP THE SNOWFLAKES

We add one instance of the snowflake with the <span></span> tag. If you wish to add more snowflakes simply multiply this tag. Now create a file called style.css and add the design for the class created above:

.fallingSnow span {
    display: inline-block;
    width: 80px;
    height: 80px;
    margin: -280px 60px 54px -34px;

    background:url("snowflake.png");

    -webkit-animation: fallingSnow 12s infinite linear;
    -moz-animation: fallingSnow 12s infinite linear;
}

Add the snowflake here as a background for each instance of the span that we defined earlier. Size and the initial position of the flakes are set here. Webkit animation is actually pretty simple. We set which class to animate (fallingSnow) and set the falling time to 12 seconds. We want the animation to continuously repeat itself so we will set it to infinite. Eeasing is set to cubic-bezier to achieve a somewhat random falling effect. I chose this easing over linear in this case so the falling of the snowflakes feels more realistic. You can create your own cubic-bezier easing with the help of this great tool where you can set the curve, check the animation and just copy the settings to your style.css.

SET THE DELAYS

Before we get to the animation itself we have to somehow randomize the snowflakes so they don’t all start falling at the same time. I used the nth-child method to define several sequences of flakes with different animation delays.

.fallingSnow span:nth-child(5n+5) {
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
}

.fallingSnow span:nth-child(3n+2) {
    -webkit-animation-delay: 1.5s;
    -moz-animation-delay: 1.5s;
}

.fallingSnow span:nth-child(2n+5) {
    -webkit-animation-delay: 1.7s;
    -moz-animation-delay: 1.7s;
}

These are just three examples, I added several more sequences in the live example provided above. Download the source files to see them all. The first sequence is set to 5n+5 which means flakes number 5, 10, 15,… will start falling with the delay of 1 second. The second sequence is set to 3n + 2 which means flakes 2,5, 8, 11,… will start falling with the delay of 1.5 seconds. Note that some sequences may overlap with each other but it’s not a big deal, the CSS will always take the last setting and use it for the animation.

SETTING UP THE ANIMATION

All we have to add now is the animation effect. It is actually pretty simple. Add the following code to your style.css file:

@-webkit-keyframes fallingSnow {
  0% {
    opacity: 1;

	-webkit-transform: translate(0, 0px) rotateZ(0deg);
  }
  75% {
    opacity: 1;

	-webkit-transform: translate(100px, 600px) rotateZ(270deg); 
  }
  100% {
    opacity: 0;

	-webkit-transform: translate(150px, 800px) rotateZ(360deg);
  }
}

As you can see we divided our animation into three parts (state at 0%, at 75% and at 100%). The animation starts with x and y coordinates set to 0px and rotation along Z axis also set to 0. This is the initial position of the animation. After the animation starts it will start moving towards position set in the second part (75%). Flakes will move slightly to the right (x coordinate is set to 100px) and down (y coordinate is set to 600px). It will also rotate for 3/4 of the full circle (270deg). Snowflakes will still be fully visible (opacity is set to 1). Opacity is the reason why we added the second part of animation anyway. It allows us to slowly fade the flakes to invisible after they reach a certain point. When flakes reach the ending point (100%) they are instantly moved back up where they start animating again. And we are done. The implementation is pretty simple and straightforward and you get a decent falling snow effect in no time. And it’s extremely light weight with no extra resources used.

Snow Text Generator

If you want to take another step and add cool snow effect to your text, logos and graphics check out the Snow Text Generator from MightyDeals.

Features of the Snow Text Generator

• Snow Text Generator contains 1 PSD file, 2320 x 1546 px, 300 dpi.
• You’ll get 12 Iced Snow Backgrounds for a cooler effect.
• 4 Dropped Snow Brushes – paint your own dropped snow around your generated snow text on 2 specially styled layers.
• 7 Fallen Snow Overlays – packed snow around te edges of your artwork or distributed over the whole field.
• 1 Ice Cut Text layer style – just like your text is cut into the background.
• 4 Snowing Overlays – it’s a top view winter scene. With this overlays you see the snow falling towards the artwork.

 

CONCLUSION

CSS3 animations can be very powerful and diverse and even animation of multiple objects is a piece of cake. Please note that these animations are only supported in Webkit browsers (Chrome, Opera). In our future tips&tricks posts, I will show you how to make gradients, apply animations to images and much more so stay tuned! Winter is still far away but when it comes you will be ready to give your website an extra kick in December with your brand new falling snow animation.

Download Falling Snow Source Files

Image Credit

Credit for the beautiful winter image used in the example goes to DreamyPixel.