propiedad Style animationTimingFunction

definición y uso

animationTimingFunction especificar la curva de velocidad de la animación.

La curva de velocidad define el tiempo que toma la animación para cambiar de un conjunto de estilos CSS a otro.

La curva de velocidad se utiliza para cambios suaves.

ejemplo

cambiar la propiedad animationTimingFunction del elemento <div>:

document.getElementById("myDIV").style.animationTimingFunction = "linear";

intente usted mismo

sintaxis

retornar la propiedad animationTimingFunction:

objeto.style.animationTimingFunction

establecer la propiedad animationTimingFunction:

objeto.style.animationTimingFunction = "linear|ease|ease-in|ease-out|cubic-bezier(n, n, n, n)|initial|inherit"

valor de atributo

valor descripción
linear La velocidad de la animación es la misma de principio a fin.
ease valor predeterminado. La animación comienza lentamente, luego se acelera y luego termina lentamente.
ease-in La animación comienza lentamente.
ease-out La animación termina lentamente.
ease-in-out La animación tiene un comienzo y un final lentos.
cubic-bezier(n, n, n, n)

defina sus propios valores en la función de Bézier en tres pasos.

los valores posibles son números de 0 a 1.
initial establezca esta propiedad en su valor predeterminado. Consulte initial.
inherit hereda esta propiedad de su elemento padre. Consulte inherit.

detalles técnicos

valor predeterminado: ease
valor de retorno: cadena que representa el Atributo animation-timing-function.
versión de CSS: CSS3

soporte del navegador

animationTimingFunction es una característica de CSS3 (1999).

Todos los navegadores lo admiten completamente:

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
soporte soporte soporte soporte soporte 11

páginas relacionadas

Manual de referencia de CSS:Atributo animation-timing-function