Animaciones:

Las animaciones en css3 nos permiten hacer cosas que con las transiciones no alcanzamos y nos quedamos cortos.

La sintaxis básica para una animación:

Elemento { animation-name: [nombre de la animación]; animation-duration: [tiempo de duración]; } @ keyframes [nombre de la animación] { from { [propiedades y valores del estado inicial de la animación] } to { [propiedades y valores del estado final de la animación] } }

Veamos un ejemplo donde emplearemos la sintaxis expuesta, a este momento solo el FireFox, Chrome y Opera implementan las animaciones. Mostraremos un recuadro con un texto que parta de la columna 30px y avance hasta la columna 300px y que cambie del color gris al color amarillo:

#animaciones1{ left:30px; position:relative; border-radius: 20px; background-color:#ddd; width:200px; height:100px; padding:4px; -moz-animation-name: animacion1; -moz-animation-duration: 4s; -webkit-animation-name: animacion1; -webkit-animation-duration: 4s; -o-animation-name: animacion1; -o-animation-duration: 4s; } @-moz-keyframes animacion1 { from { left:30px; background-color:#ddd; } to { left:300px; background-color:#ff0; } } @-webkit-keyframes animacion1 { from { left:30px; background-color:#ddd; } to { left:300px; background-color:#ff0; } } @-o-keyframes animacion1 { from { left:30px; background-color:#ddd; } to { left:300px; background-color:#ff0; } }

Como podemos ver inicializamos las propiedades animation-name con el nombre de la animación: -moz-animation-name: animacion1; -webkit-animation-name: animacion1; -o-animation-name: animacion1; Y la propiedad animation-duration con el tiempo duración de la animación: -moz-animation-duration: 4s; -webkit-animation-duration: 4s; -o-animation-duration: 4s;

La sintaxis para especificar la animación propiamente dicha es idéntica para cada navegador pero como debemos utilizar el prefijo luego creamos tres:

@-moz-keyframes animacion1 { from { left:30px; background-color:#ddd; } to { left:300px; background-color:#ff0; } }

En la parte del from indicamos el estado inicial del elemento (en este caso 30 píxeles respecto a la izquierda y de color gris (#ddd)), luego en la sección del to indicamos los valores finales que debe tomar el elemento (300 píxeles respecto a la izquierda y de color amarillo(#ff0))