Nu am ce sa mai zic, doar v-a las css-ul.
<style>
#snowFall {
background:none;
font-family: $fontfamily;
height: 100%;
left:0;
position: absolute;
width: 100%;
z-index:1;
pointer-events: none;
background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/426955/S1.png'),
url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/426955/S2.png'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/426955/S3.png');
-webkit-animation: snowFall 10s linear infinite;
-moz-animation: snowFall 10s linear infinite;
-ms-animation: snowFall 10s linear infinite;
animation: snowFall 10s linear infinite;
}
@-webkit-keyframes snowFall {
0% { background-position: 0px 0px, 0px 0px, 0px 0px;}
50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-moz-keyframes snowFall {
0% { background-position: 0px 0px, 0px 0px, 0px 0px;}
50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-ms-keyframes snowFall {
0% { background-position: 0px 0px, 0px 0px, 0px 0px;}
50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@keyframes snowFall {
0% { background-position: 0px 0px, 0px 0px, 0px 0px;}
50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}</style>
<div id="snowFall"></div>