Falling Rain Animation CSS3

* { margin:0; padding:0; } a { color:white; font-style:italic; } /*Keyframes*/
@keyframes snow { 0% { background-position:0px 0px, 0px 0px, 0px 0px } 100% { background-position:500px 1000px, 400px 400px, 300px 300px } }
@-moz-keyframes snow { 0% { background-position:0px 0px, 0px 0px, 0px 0px } 100% { background-position:500px 1000px, 400px 400px, 300px 300px } }
@-webkit-keyframes snow { 0% { background-position:0px 0px, 0px 0px, 0px 0px }
50% { background-color:#b4cfe0 } 100% { background-position:500px 1000px, 400px 400px, 300px 300px; background-color:#ff6c00; } }
@-ms-keyframes snow { 0% { background-position:0px 0px, 0px 0px, 0px 0px } 100% { background-position:500px 1000px, 400px 400px, 300px 300px } }
body { background:#000; } .bg { background:url(rain_bg1.jpg) no-repeat; }
#wrap { background-image:url('rain.png'), url('rain1.png');
-moz-animation:snow 10s linear infinite; -ms-animation:snow 10s linear infinite; animation:snow 10s linear infinite; width:800px; height:541px; }
#container { width:800px; margin:0px auto; text-align:center; color:white; font:50px "League Gothic", "Arial Narrow", "Bebas Neue", Arial;
text-shadow:0px 0px 4px rgba(0,0,0, 0.5); }
#container p { font:22px Arial, Helvetica, sans-serif;}

<div class="bg"><div id="wrap"><div id="container"><h3>Falling Rain CSS3 by Muthujoo</h3></div></div></div>

Tagged in:

• rain css3
• rain flow css3
• rain animation css3
• CSS3