Categories
CSS Web development

Let it snow! CSS Snowfall Animation

I still waiting for the first snow this winter. I love snow and winter sports! I created some snow in CSS (while waiting for the real one ;))

Do you like this gif? Check more gifs in theĀ store.

You can add the CSS Snow Effect to your image (one element) or whole background. First I’ll show you how to add a bit of snow to the image.

To see live output click here.

Adding the Snow Effect to the Image

To create your own Snow Effect Animation you need four images. 3 images of snowflakes in .png format (you can use those below) and one image which you want to style with snow (winter landscape, snowman, or your picture..).

snow1.png
snow3.png
snow.png

If you want to create the snowflakes by yourself make the documents in the same size.

When you collected all necessary images we can go further and:

  1. Add HTML
  2. Add CSS
  3. Add CSS Animation

Step 1.

Add HTML

 <div id="card-container">
        <img src="yourimage.jpg"> 
        <div id="snow-3" class="snow-layer"></div> 
        <div id="snow-2" class="snow-layer"></div> 
        <div id="snow-1" class="snow-layer"></div> 
    </div>

Step 2.

Add CSS

#card-container {
            position: relative;
            box-sizing: border-box;
            display: inline-block;
            padding: 0;
            margin: 0;
            box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
            border: 15px solid brown;
            border-radius: 15px;
        }
 
      
        #card-container img {
            position: relative;
            box-sizing: border-box;
            height: 480px;  
            padding: 0;
            margin: 0;
            display: block;
        }
 
     
        .snow-layer {
            position: absolute;
            box-sizing: border-box;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: block;
        }

Step 3.

Add CSS Animation

@keyframes backgroundScroll {
            0%   { background-position: 0 0 }
            100% { background-position: 0 480px }  
        }
 
        
        #snow-1 {
            animation:  backgroundScroll 6s linear infinite; /* Linear animation for constant speed */
            background: url('snow.png') repeat; /* Repeat the background */
            background-size: 100% 100%; 
        }
 
       
        #snow-2 {
            animation: backgroundScroll 10s linear infinite;
            animation-delay: -3s; 
            background: url('snow3.png') repeat;
            background-size: 100% 100%;
        }
 
       
        #snow-3 {
            animation: backgroundScroll 14s linear infinite;
            animation-delay: -9s; /* Optional. Shifts layer down. */
            background: url('snow1.png') repeat;
            background-size: 100% 100%;
        }

To see the live output go to lenastanley.com.

Adding the snow effect to the background

What do you need to do?

You need to have just two images of snowflakes in format .png (you can take them from above) and an optional (you can use just background-color property) your image which you would like to put as your background, and then:

  1. Add HTML
  2. Add CSS
  3. Add CSS Animation

Step 1.

Add HTML

<div class="section">
<div class="snow1"></div>
<div class="snow2"></div>
</div>

Step 2.

Add CSS

.section{
background:url(your image.jpg);
background-size: cover;
width: 100%;
height: 650px;
position: relative;
overflow: hidden;
}
.snow1{
	background: url(snow.png);
	background-repeat: repeat;
	width: 100%;
	height: 650px;
	position: absolute;
	top:0;
	left:0;
	animation:animateOne 10s infinite linear;
}
.snow2{
	background: url(snow3.png);
	background-repeat: repeat;
	width: 100%;
	height: 650px;
	position: absolute;
	top:0;
	left:0;
	animation:animateSecond 10s infinite linear;
}

Step 3.

Add CSS Animation

@keyframes animateOne 
{
	0%
	{background-position: 0px 0px}
	100%
	{background-position: 100px 650px}
}
@keyframes animateSecond
{
	0%
	{background-position: 0px -100px}
	100%
	{background-position: 0px 650px}
}

To see the live output of CSS Snow Effect background go to: lenastanley.com.

Enjoy!