Latest web development tutorials

HTML DOM propiedad Estilo transitionTimingFunction

Estilo de referencia de objetos Objetos de estilo

Ejemplos

Cambiar la velocidad de la curva de efecto de transición:

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

Trate »

Definición y Uso

atributo transitionTimingFunction especifica la velocidad de la curva de efecto de transición.

Esta propiedad permite que el efecto de transición en el tiempo para cambiar su velocidad.


Soporte para el navegador

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 10, Firefox, Opera y Chrome apoyo transitionTimingFunction propiedad.

Safari es compatible con otra alternativa de la propiedad de atributos que la propiedad WebkitTransitionTimingFunction.

Nota: Internet Explorer 9 y versiones anteriores no son compatibles con la propiedad transitionTimingFunction.


gramática

transitionTimingFunction propiedades para la espalda:

object .style.transitionTimingFunction

Configuración de las propiedades transitionTimingFunction:

object .style.transitionTimingFunction ="ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier()|
initial|inherit"

propiedad Valor

描述
ease 默认值。规定慢速开始,然后变快,然后慢速结束的过渡效果(相当于 cubic-bezier(0.25,0.1,0.25,1))。
linear 规定从开始到结束都保持相同速度的过渡效果(相当于 cubic-bezier(0,0,1,1))。
ease-in 规定以慢速开始的过渡效果(相当于 cubic-bezier(0.42,0,1,1))。
ease-out 规定以慢速结束的过渡效果(相当于 cubic-bezier(0,0,0.58,1))。
ease-in-out 规定以慢速开始和结束的过渡效果(相当于 cubic-bezier(0.42,0,0.58,1))。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
initial 设置该属性为它的默认值。请参阅 initial
inherit 从父元素继承该属性。请参阅 inherit

detalles técnicos

Por defecto: facilidad
Devuelve: Cadena que representa el elemento de propiedad-tiempo-función de transición.
versión CSS CSS3


Artículos relacionados

CSS Referencia: Transición-Timing la propiedad funciones


Estilo de referencia de objetos Objetos de estilo