Efecto de movimiento un poco más complejo con CSS3: La propiedad animation

publicado enArtículos, Consejos CSS el de

Si hace poco vimos cómo animar mediante transition ahora os pongo un ejemplo con animation, para animar elementos sin necesidad de javascript. Una de las particularidades de la propiedad de CSS3 es que todavía no es estándar, lo que nos obliga a definirla prácticamente para todos los motores de renderizado en navegadores. Por ejemplo:

#santa{
position:relative;
left:110%;
-moz-animation:volar 20s infinite;
-webkit-animation: volar 20s infinite;
-o-animation:volar 20s infinite;
-ms-animation:volar 20s infinite;
-khtml-animation:volar 20s infinite;
animation:volar 20s infinite;
}

Donde aparte de los motores definimos el nombre de la animación, volar, el tiempo, 20s, y si añadimos infinite se reproducirá indefinidamente en el tiempo.

Podemos determinar los keyframes donde la animación cambia de posición, tamaño, color, etc. Es decir, en qué momento de la animación se produce un cambio… donde en definitiva establecemos qué propiedad de CSS va a actuar en cada momento. Al carecer de estandarización hay que definirlo también para cada navegador. Por supuesto el nombre de la animación debe coincidir con el nombre anterior, os pongo un ejemplo:

@-moz-keyframes volar{
0%{
left:-150px;
top:5px;
width:80px;
}
25%{
top:220px;
width:50px;
}
50%{
top:90px;
width:40px;
-moz-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
}
75%{
top:230px;
width:65px;
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
}
100%{
margin-left:100px;
top:90px;
width:25px;
}
}

@-webkit-keyframes volar{
0%{
left:-150px;
top:5px;
width:80px;
}
25%{
top:220px;
width:50px;
}
50%{
top:90px;
width:40px;
-moz-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
}
75%{
top:230px;
width:65px;
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
}
100%{
margin-left:100px;
top:90px;
width:25px;
}
}

@-o-keyframes volar{
0%{
left:-150px;
top:5px;
width:80px;
}
25%{
top:220px;
width:50px;
}
50%{
top:90px;
width:40px;
-moz-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
}
75%{
top:230px;
width:65px;
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
}
100%{
margin-left:100px;
top:90px;
width:25px;
}
}

@-ms-keyframes volar{
0%{
left:-150px;
top:5px;
width:80px;
}
25%{
top:220px;
width:50px;
}
50%{
top:90px;
width:40px;
-moz-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
}
75%{
top:230px;
width:65px;
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
}
100%{
margin-left:100px;
top:90px;
width:25px;
}
}

@-khtml-keyframes volar{
0%{
left:-150px;
top:5px;
width:80px;
}
25%{
top:220px;
width:50px;
}
50%{
top:90px;
width:40px;
-moz-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
}
75%{
top:230px;
width:65px;
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
}
100%{
margin-left:100px;
top:90px;
width:25px;
}
}

@keyframes volar{
0%{
left:-150px;
top:5px;
width:80px;
}
25%{
top:220px;
width:50px;
}
50%{
top:90px;
width:40px;
-moz-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
}
75%{
top:230px;
width:65px;
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
}
100%{
margin-left:100px;
top:90px;
width:25px;
}
}

Por último sólo quedará darle la clase o ID al elemento que queremos animar:


<img id="santa" alt="" src="img/santa-volador2.png" />

Pongo como ejemplo el Papá Noel volador que sale en esta página. Las propiedades left y position de #santa son para que funcione el efecto de la animación correctamente.