Atributo animation-timing-function CSS

Definición y uso

función de tiempo de animación Especificar la curva de velocidad de la animación.

Las curvas de velocidad definen el tiempo que toma la animación para cambiar de un conjunto de estilos CSS a otro.

Las curvas de velocidad se utilizan para hacer que los cambios sean más suaves.

Vea también:

Tutoriales de CSS3:Animación de CSS

Manual de Referencia de HTML DOM:Atributo animationTimingFunction

Ejemplo

Ejemplo 1

Reproducir la animación a la misma velocidad desde el principio hasta el final:

div
{
función de tiempo de animación:2s;
}

Prueba por ti mismo

Ejemplo 2

Para entender mejor los diferentes valores de las funciones de tiempo, se proporcionan cinco elementos div diferentes con cinco valores diferentes:

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

Prueba por ti mismo

Ejemplo 3

Igual que en el ejemplo anterior, pero define la curva de velocidad a través de la función cubic-bezier:

#div1 {animation-timing-function: cubic-bezier(0,0,1,1);}
#div2 {animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {animation-timing-function: cubic-bezier(0.42,0,0.58,1);}

Prueba por ti mismo

Sintaxis de CSS

animation-timing-function: value;

La propiedad animation-timing-function utiliza la función matemática llamada función de cubic-bezier para generar la curva de velocidad. Puedes usar tus propios valores en esta función, o valores predefinidos:

Valor Descripción Prueba
linear La velocidad de la animación es la misma de principio a fin. Prueba
suave Predeterminado. La animación comienza lentamente, luego se acelera y se vuelve lenta antes de finalizar. Prueba
ease-in La animación comienza lentamente. Prueba
ease-out La animación termina lentamente. Prueba
ease-in-out La animación comienza y termina lentamente. Prueba
cubic-bezier(n,n,n,n) En la función cubic-bezier, introduce tus propios valores. Los valores posibles son números entre 0 y 1.

Consejo:Prueba diferentes valores en la función "Prueba por ti mismo" de abajo.

Detalles técnicos

Valor predeterminado: suave
Herencia: no
Versión: CSS3
Sintaxis de JavaScript: objeto.style.animationTimingFunction="linear"

Compatibilidad 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 que utiliza el prefijo.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
43.0
4.0 -webkit-		 10.0 16.0
5.0 -moz-		 9.0
4.0 -webkit-		 30.0
15.0 -webkit-
12.0 -o-