Contenedor con efecto de nieve

Este modelo ha sido tomado desde Vagacode Vagacode | Animaciones con CSS 
Animaciones con CSS


Las transiciones son la forma de cambiar una o varias propiedades de una etiqueta con un efecto visual tal que ese cambio no se realiza de manera instantánea sino que demora un cierto tiempo y por lo tanto, parece estar animado. Una animación con CSS es algo similar... Leer más» 

Acá tenemos el código HTML

HTML

<div id="container">
 <div id="snow" class="snow">
  <div class="snowflake f1">❅</div>
  <div class="snowflake f2">❄</div>
  <div class="snowflake f3">❅</div>
  <div class="snowflake f4">❄</div>
 </div>
</div>

Este es el CSS

CSS

<style>
@keyframes fade {
 0% {opacity:0;}
 10% {opacity:1;}
 100% {opacity:0;}
}
@keyframes fall {
 0% {top:10px;}
 100% {top:290px;}
}
@keyframes accumulate {
 0% {height:0px; opacity:0}
 100% {height:10px; opacity:75;}
}
@keyframes spin {
 0% {transform: rotate(-180deg) translate(0px, 0px);}
 100% {transform: rotate(180deg) translate(10px, 75px);}
}
#container{
 height: 300px;  position: relative;
 width: 350px;
}
#snow div {
 position: absolute;
 top: -40px;  animation-name: fall, fade, spin;
 animation-iteration-count: infinite;
 animation-direction: normal;
 animation-timing-function: ease-in;
 animation-name: fall, fade, spin;
 animation-iteration-count: infinite;
 animation-direction: normal;
 animation-timing-function: ease-in;
}
.snowflake {
 color: #fff;
 position: absolute;
}
.snowflake.f1 {font-size: 24px; left: 10px; animation-duration: 5s;}
.snowflake.f2 {font-size: 48px; left: 290px; animation-duration: 7s;}
.snowflake.f3 {font-size: 20px; left: 120px; animation-duration: 6s;}
.snowflake.f4 {font-size: 32px; left: 160px; animation-duration: 4s;}
</style>

Este es el resultado

❅

❄

❅

❄

❅

❄