Amazing Snow Fall Effect Using Pure CSS3

In our last post we learned how to create snowfall effect using JavaScript plugin Make ShowStrome.js. To-day I will explain how to create similer kind of effect using CSS3. You can find lots of javascript(Jquery) to CSS3 conversions in CSS3-Widgets section. I think this is also another JavaScript to jquery conversion. Have a look at the demo below.
Amazing Snow Fall Effect Using Pure CSS3


demo
download

index.html

<html> 
<head> 
<title>Amazing Snow Fall Effect Using Pure CSS3:demo.techumber.com</title> 
<style> 
</style> 
</head> 
<body> 

</body> 
</html> 

CSS

body{ 
background: #212121; 
font-family: Androgyne; 
background-image: url('img/s1.png'), url('img/s2.png'), url('img/s3.png'); 
height: 100%; 
left: 0; 
position: absolute; 
top: 0; 
width: 100%; 
-webkit-animation: snow 10s linear infinite; 
-moz-animation: snow 10s linear infinite; 
-ms-animation: snow 10s linear infinite; 
animation: snow 10s linear infinite; 
} 

Creating key-frames

@keyframes snow { 
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;} 
} 

Cross browser support

@-moz-keyframes snow { 
0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 
50% {background-position: 500px 500px, 100px 200px, -100px 150px;} 
100% {background-position: 400px 1000px, 200px 400px, 100px 300px;} 
} 
@-webkit-keyframes snow { 
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 snow { 
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;} 
} 

Complete Code

<html lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>demo.techumber.com</title> 
<style type="text/css"> 
@font-face { 
font-family: Androgyne; 
src: url('Androgyne_TB.otf'); 
} 
.container{ 
width: 700px; 
margin: 0 auto; 
} 
.logo{ 
text-align: center; 
} 
.logo a{ 
color:#fff; 
} 
body{ 
background: #212121; 
font-family: Androgyne; 
background-image: url('img/s1.png'), url('img/s2.png'), url('img/s3.png'); 
height: 100%; 
left: 0; 
position: absolute; 
top: 0; 
width: 100%; 
-webkit-animation: snow 10s linear infinite; 
-moz-animation: snow 10s linear infinite; 
-ms-animation: snow 10s linear infinite; 
animation: snow 10s linear infinite; 
} 
@keyframes snow { 
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 snow { 
0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 
50% {background-position: 500px 500px, 100px 200px, -100px 150px;} 
100% {background-position: 400px 1000px, 200px 400px, 100px 300px;} 
} 
@-webkit-keyframes snow { 
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 snow { 
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> 
</head> 
<body> 
<div class="container"> 
<header> 
<h1 class="logo"> 
<a href="http://techumber.com"> 
Techumber.com 
</a> 
</h1> 
</header> 

</div> 
</body> 
</html>