Transiciones web

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. ¿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. Referencia https://cssanimation.rocks/es/transition-vs-animation/