Animaciones: concepto
Antes de decir que son las animaciones recordemos las transiciones:
¿Qué son las transiciones?
Una transición ocurre cuando un elemento cambia de un estado A hacia otro B. En el momento que hay un cambio de estado, el navegador genera una secuencia de estados intermedios (los coloca justo en medio del estado inicial y el final). Una transición tiene dos estados clave: un estado inicial y un estado final.
Normalmente, vemos transiciones utilizando el evento hover, o cuando cierto contenido es agregado o eliminado de una página. El estado hover puede ser un cambio sutil del color de fuente, del tamaño o posición de elemento o del contenido de una página.
Ya que las transiciones están limitadas a estos dos estados, pueden carecer de cierta flexibilidad, pero al mismo tiempo son más fáciles de utilizar.
¿Cuándo hay que utilizarlas?
Si deseas cambiar un elemento de un estado hacia otro de manera suave o fluida, una transición es una buena opción. Cambios simples pueden ser generados por medio de transiciones y las funciones de tiempo pueden ser utilizadas para personalizar la forma en la que la transición aparece.
Una transición funciona correctamente cuando alguien realiza una acción hover o pulsa un botón.
¿Qué son las animaciones?
Animaciones CSS son una alternativa más potente que las transiciones. En lugar de confiar en el secuencia de un estado inicial a un estado final, las animaciones pueden tener cuantos estados se necesiten en medio del estado inicial y el estado final, ofreciendo un mayor control de cómo los estados son animados.
Mientras una transición se mueve de un estado A a un estado B, una animación puede moverse de A, B, C a D. Es decir, puede tener la cantidad de estados intermedios que sean necesarios.
Las animaciones pueden lograr este comportamiento utilizando una colección de keyframes. Mientras una transición puede ser especificada con una línea de de código en una clase, una animación requiere un conjunto de keyframes que son descritos separados de la clase.
¿Cuándo utilizarlas?
Si una animación necesita cargar al mismo tiempo que carga la página web o si la animación es más compleja de ir de un punto A a B, una animación CSS probablemente sea la más adecuada.
Un ejemplo de esto puede ser si deseas tener una animación que comienza después de cierto tiempo predeterminado. Una animación también puede ser una buena opción cuando un elemento se tiene que mover por múltiples lugares.
Resumiendo:
Trancisiones para crear una transición suave y fluída de un estado a otro, mientras que las animaciones para una serie más compleja de moviemientos. Transiciones usualmente son mas fáciles de crear, de administrar y de aplicar a una mayor cantidad de casos.
Animaciones si necesitas un mayor control sobre la animación de un elemento por medio de una serie de pasos o si la animación necesita iniciar al momento de que la página cargue, entonces una animación con keyframes puede ser la mejor opción.
Las animaciones css nos permiten modificar el estilo de los elementos de la web de una forma animada, consiguiendo de esta forma un diseño mucho más dinámico y atractivo. Con las transiciones de css podemos hacer cosas parecidas pero nunca a un nivel tan específico como las animaciones, ya que con estas últimas, podemos controlar en cualquier momento el estado de la animación.