Transiciones

Las transiciones CSS proporcionan una forma de animar los cambios de las propiedades CSS, en lugar de que los cambios surtan efecto de manera instantánea.
Por ejemplo, si cambias el color de un elemento de blanco a negro, normalmente el cambio es instantáneo. Al habilitar las transiciones CSS, el cambio sucede en un intervalo de tiempo que puedes especificar, siguiendo una curva de aceleración que puedes personalizar.

Las transiciones CSS se controlan mediante la propiedad abreviada 'transition'. Es preferible utilizar este método porque de esta forma se evita que la longitud de la lista de parámetros sea diferente, lo que puede dar lugar a tener que emplear un tiempo considerablemente largo en depurar el código CSS.

También se puede controlar los componentes individuales de la transición usando las siguientes subpropiedades:

Transition-property:

Tiempo de retardo entre el momento en que el elemento se carga y el comienzo de la secuencia de la animación.

Animation-direction:

Indica si la animación debe retroceder hasta el fotograma de inicio al finalizar la secuencia o si debe comenzar desde el principio al llegar al final.

Transition-timing-function:

Especifica la curva cúbica bézier que se usa para definir cómo se computan los valores intermedios para las propiedades.

Transition-delay:

Define el tiempo de espera entre el momento en que se cambia una propiedad y el inicio de la transición.

Pinchar aquí para ver ejemplos

Pinchar aquí para volver a inicio