Transiciones vs. Animaciones

¿Cuando realizas una animación web, utilizas una transición o una animación? En ciertas ocasiones preferirás utilizar una sobre el otra. Discutamos algunas de las diferencias.

¿Qué son transiciones?

Una transición ocurre cuando un elemento cambia de un estado hacia otro. En el momento que hay un cambio de estado, el navegador genera una secuencia de estados y los coloca justo en medio del estado inicial y el final. Una transición, tiene un estado inicial y un estado final.

Normalmente, vemos transiciones utilizadas al momento de 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 o el contenido de una página puede cambiar de invisible a visible.

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.

O cuando algún elemento es agregado a una página:

Un elemento
Un elemento

¿Qué son animaciones?

Animaciones CSS son una alternativa más poderosa que las transiciones. En vez 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. O puede tener la cantidad de estados que necesite.

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 utilizarlos?

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, como el efecto de parpadeo que tiene Baymax:

Una animación también puede ser una buena opción cuando un elemento se tiene que mover por múltiples lugares, como una capa de instrucciones que se mueve siguiendo el cursor mostrando áreas de interés en la pantalla.

Muchas veces no es obvio.

En una publicación reciente utilicé una animación inicialmente, pero luego se convirtió en un caso perfecto para utilizar una transición.

Cuando empecé a diseñar éste reloj, las manecillas se movían constantemente al momento de cargar la página. Este fue un buen caso para utilizar la propiedad animation. Quería empezar la animación al momento de carga y continuar infinitamente. Cuando empecé a agregar una mayor complejidad, pensé que tenía más sentido si los ángulos de las manecillas eran determinados utilizando JavaScript.

Las manecillas se estaban moviendo por medio de JavaScript, transitions se convirtió en una mejor opción. Cuando JavaScript cambia el ángulo de la manecilla, CSS transition se encarga del cambio (del estado A al estado B) de una forma mucho mas elegante de lo que una animación lo podría hacer.

Mira este tutorial del reloj en CSS para más detalles.

En resumen

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. 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.