Latest web development tutorials

HTML DOM style propriétés de transition

Style de Object Reference style Objets

Exemples

Le pointeur de la souris survole l'élément div, il va progressivement changer son apparence:

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

Essayez »

Définition et utilisation

la propriété de transition est un raccourci pour définir les quatre propriétés de transition:

transitionProperty, transitionDuration, transitionTimingFunction et transitionDelay.

Remarque: Toujours définir la propriété de transitionDuration, sinon la durée est égale à zéro, il ne produira pas des effets de transition.


support du navigateur

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 10, Firefox, Opera et Chrome en charge la propriété de transition.

Safari prend en charge une autre variante de la propriété attribut que la propriété de WebkitTransition.

Remarque: Internet Explorer 9 et les versions antérieures ne prennent pas en charge la propriété de transition.

grammaire

Retours transition attributs:

object .style.transition

Définissez les propriétés de transition:

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

Valeur de la propriété

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

détails techniques

Par défaut: tout 0 facilité 0
Retours: Chaîne représentant les attributs de l'élément de transition.
CSS version CSS3


articles connexes

CSS Référence: Propriétés de transition


Style de Object Reference style Objets