Código HTML:
@-webkit-keyframes plumas { from {top: -300px;} /* Capa desplazamiento vertical de los copos */ to {top: 625px;} } @-webkit-keyframes pluma{ 0% { -webkit-transform: rotate(-35deg) translate(10px, 50px);} /* La trayectoria es definida por los deg*/ 50% { -webkit-transform: rotate(95deg) translate(10px, 50px);} 100% { -webkit-transform: rotate(-60deg) translate(10px, 90px);} /* Los copos van del 10px al 75px*/ } #pluma div { /* div para que todo funcione*/ position: absolute; top: -40px; -webkit-animation-name: pluma, plumas; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: normal; -webkit-animation-timing-function: ease-in; } .pluma { color: #fff; position: absolute;} /* Caracteristicas generales de todos los copos*/ .pluma.f1 { left: 20px; -webkit-animation-duration: 8s;} /* Caracteristicas particulares de cada copo*/ .pluma.f2 { left: 500px; -webkit-animation-duration: 10s; } .pluma.f3 { left: 820px; -webkit-animation-duration: 6s;}
Código HTML:
<div id="pluma"> <div class="pluma f1"><img src="objetos/p1.png" border="0"></div> <div class="pluma f2"><img src="objetos/p2.png" border="0"></div> <div class="pluma f3"><img src="objetos/p3.png" border="0"></div> </div>