Propiedad transition-timing-function

La propiedad transition-timing-function establece la velocidad de cambio (aceleración) de la transición suave transition. Por ejemplo, primero lento, luego rápido, luego lento etc.

Sintaxis

selector {
	transition-timing-function: valor;
}

Valores

Valor	Descripción
`ease`	Primero lento, luego rápido, al final nuevamente lento.
`ease-in`	Comienza lentamente y se acelera gradualmente.
`ease-out`	Comienza rápidamente y se detiene gradualmente.
`ease-in-out`	Primero lento, luego rápido, al final nuevamente lento. Se diferencia de ease en la velocidad.
`linear`	Siempre la misma velocidad.
`step-start`	No hay animación, la propiedad toma inmediatamente el valor final.
`step-end`	No hay animación, la propiedad espera el tiempo, establecido en `transition-duraton`, y luego toma instantáneamente el valor final.
`steps`	El valor de la propiedad cambia a saltos.
`cubic-bezier`	Curva de Bézier que puede definir una animación arbitraria. Ver generador de curvas de Bézier.

Valor por defecto: ease.

Comparación de diferentes valores

Pase el cursor del mouse sobre los bloques a continuación, para ver el funcionamiento de todos los tipos de funciones de temporización:

Ejemplo

Pase el cursor del mouse sobre el bloque - cambiará suavemente su ancho en 2 segundos. Dado que se estableció el valor ease-in, la animación comenzará lentamente y se acelerará gradualmente:

<div id="elem"></div>

#elem {
	border: 1px solid black;
	transition-timing-function: ease-in;
	transition-duration: 2s;
	transition-property: width;
	height: 50px;
	width: 100px;
}
#elem:hover {
	width: 400px;
}

Ver también

la propiedad transition-duration,
que establece la duración de la transición suave
la propiedad transition-property,
que establece el nombre de la propiedad para la transición suave
la propiedad transition-delay,
que establece el retraso antes de la transición suave
la propiedad transition,
que es la abreviatura para la transición suave
la propiedad animation,
con la que se puede crear una animación