Latest web development tutorials

propiedades de transición de estilo HTML DOM

Estilo de referencia de objetos Objetos de estilo

Ejemplos

El puntero del ratón sobre el elemento div, que va a cambiar gradualmente su aspecto:

document.getElementById("myDIV").style.transition="all 2s";

Trate »

Definición y Uso

Propiedad de transición es una propiedad abreviada para establecer las cuatro propiedades de transición:

transitionProperty, transitionDuration, transitionTimingFunction y transitionDelay.

Nota: Ajuste siempre la propiedad transitionDuration, de lo contrario la duración es cero, no producirá efectos de transición.


Soporte para el navegador

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 10, Firefox, Opera y Chrome admite la propiedad de transición.

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

Nota: Internet Explorer 9 y versiones anteriores no son compatibles con la propiedad de transición.

gramática

Atributos de transición rendimientos:

object .style.transition

Establecer las propiedades de transición:

object .style.transition="property duration timing-function delay|initial|inherit"

propiedad Valor

描述
transitionProperty 规定应用过渡效果的 CSS 属性的名称。
transitionDuration 规定完成过渡效果需要多少秒或毫秒。
transitionTimingFunction 规定过渡效果的速度曲线。
transitionDelay 定义过渡效果何时开始。
initial 设置该属性为它的默认值。请参阅 initial
inherit 从父元素继承该属性。请参阅 inherit

detalles técnicos

Por defecto: toda facilidad 0 0
Devuelve: Cadena que representa los atributos de los elementos de transición.
versión CSS CSS3


Artículos relacionados

CSS Referencia: propiedades de transición


Estilo de referencia de objetos Objetos de estilo