Transiciones

Especificar la curva de velocidad de la transición

La propiedad transition-timing-function especifica la curva de velocidad del efecto de transición.

Puede tener los siguientes valores:

ease – transición con inicio lento, aceleración y final lento (valor por defecto)
linear – transición con velocidad constante
ease-in – inicio lento
ease-out – final lento
ease-in-out – inicio y final lentos
cubic-bezier(n,n,n,n) – permite definir una curva personalizada

Ejemplos de curvas de velocidad:

linear

ease

ease-in

ease-out

ease-in-out

La propiedad transition-delay especifica un retardo antes de que comience la transición.

Ejemplo con retardo:

linear delay 0.5s

ease delay 1s

ease-in delay 1.5s

ease-out delay 2s

ease-in-out delay 2.5s

La propiedad transition-duration especifica el tiempo que tarda en completarse la transición.

linear delay 0.5s duration 0.5s

ease delay 1s duration 0.5s

ease-in delay 1.5s duration 0.5s

ease-out delay 2s duration 0.5s

ease-in-out delay 2.5s duration 0.5s

La propiedad transition-property especifica qué propiedad CSS activará la transición cuando cambie.

Consejo: normalmente se activa al pasar el ratón sobre un elemento.

Nota: siempre especifique también transition-duration, de lo contrario la transición no tendrá efecto.

linear delay 0.5s duration 0.5s background-color: blue;

ease delay 1s duration 0.5s background-color: blue;

ease-in delay 1.5s duration 0.5s background-color: blue;

ease-out delay 2s duration 0.5s background-color: blue;

ease-in-out delay 2.5s duration 0.5s background-color: blue;

En este capítulo aprenderá los siguientes métodos de transformación 2D: