<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>