Latest web development tutorials

HTML DOM Style transitionProperty property

Style Object Reference Style Objects

Examples

The mouse pointer hovers over the div element, it will gradually change the width and height:

document.getElementById("myDIV").style.transitionProperty="width,height";

try it"

Definition and Usage

transitionProperty attribute specifies the name of the CSS property apply the transition effect. (When the specified CSS property changes, the transition effect will start).

Tip: transition effect usually occurs when a user hovers the mouse pointer over an element.

Note: Always set transitionDuration property, otherwise the duration is zero, it will not produce transition effects.


Browser Support

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 10, Firefox, Opera and Chrome support transitionProperty property.

Safari supports another alternative of the property attribute that WebkitTransitionProperty property.

Note: Internet Explorer 9 and earlier versions do not support transitionProperty property.


grammar

Back transitionProperty properties:

object .style.transitionProperty

Setting transitionProperty properties:

object .style.transitionProperty="none|all|property|initial|inherit"

Property Value

描述
none 没有属性会获得过渡效果。
all 默认值。所有属性都将获得过渡效果。
property 定义应用过渡效果的 CSS 属性名称列表,列表以逗号分隔。
initial 设置该属性为它的默认值。请参阅 initial
inherit 从父元素继承该属性。请参阅 inherit

technical details

Defaults: all
return value: String representing the transition-property attribute of the element.
CSS version CSS3


related articles

CSS Reference: Transition-Property Property


Style Object Reference Style Objects