Atributo transition-timing-function de CSS

Definición y uso

El atributo transition-timing-function define la curva de velocidad del efecto de transición.

Esta propiedad permite que el efecto de transición cambie su velocidad a lo largo del tiempo.

Véase también:

Tutorial de CSS:Transiciones de CSS

Manual de referencia de HTML DOM:Atributo transitionTimingFunction

Ejemplo

Ejemplo 1

Efecto de transición con la misma velocidad desde el principio hasta el final:

div
{
transition-timing-function: linear;
}

prueba personalmente

Sintaxis de CSS

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-
bezier(n,n,n,n);

Valor de atributo

Valor Descripción
linear Definir un efecto de transición que comience y termine a la misma velocidad (igual a cubic-bezier(0,0,1,1)).
ease Definir un efecto de transición que comience lentamente, luego se acelere y luego termine lentamente (cubic-bezier(0.25,0.1,0.25,1)).
ease-in Definir un efecto de transición que comience lentamente (igual a cubic-bezier(0.42,0,1,1)).
ease-out Definir un efecto de transición que termine lentamente (igual a cubic-bezier(0,0,0.58,1)).
ease-in-out Definir un efecto de transición que comience y termine lentamente (igual a cubic-bezier(0.42,0,0.58,1)).
cubic-bezier(n,n,n,n) Definir sus propios valores en la función cubic-bezier. Los valores posibles son números entre 0 y 1.

Consejo:Pruebe diferentes valores en los ejemplos, de esta manera puede entender mejor su funcionamiento.

detalles técnicos

valor por defecto: ease
heredabilidad: no
versión: CSS3
sintaxis de JavaScript: objeto.style.transitionTimingFunction="lineal"

Más ejemplos

Ejemplo 2

Para entender mejor los diferentes valores de las funciones, vea los cinco diferentes elementos div con cinco diferentes valores:

#div1 {función de tiempo de transición: lineal;}
#div2 {función de tiempo de transición: ease;}
#div3 {función de tiempo de transición: ease-in;}
#div4 {función de tiempo de transición: ease-out;}
#div5 {función de tiempo de transición: ease-in-out;}

prueba personalmente

Ejemplo 3

Como en el ejemplo anterior, pero se especifica la curva de velocidad mediante cubic-bezier:

#div1 {función de tiempo de transición: cubic-bezier(0,0,1,1);}
#div2 {función de tiempo de transición: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {función de tiempo de transición: cubic-bezier(0.42,0,1,1);}
#div4 {función de tiempo de transición: cubic-bezier(0,0,0.58,1);}
#div5 {función de tiempo de transición: cubic-bezier(0.42,0,0.58,1);}

prueba personalmente

soporte del navegador

Los números en la tabla indican la primera versión del navegador que admite completamente la propiedad.

Los números con -webkit-, -moz- o -o- indican la primera versión con prefijo utilizada.

Chrome IE / Edge Firefox Safari Opera
26.0
4.0 -webkit-		 10.0 16.0
4.0 -moz-		 6.1
3.1 -webkit-		 12.1
10.5 -o-