Style transition Property

Examples

Hover the mouse pointer over a div element, and its appearance will gradually change:

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

The transition property is a shorthand property for setting four transition properties:

transitionProperty, transitionDuration, transitionTimingFunction, and transitionDelay.

Note:Always set the transitionDuration property, otherwise the duration is 0 and no transition effect will occur.

Internet Explorer 10, Firefox, Opera, and Chrome support the transition property.

Safari supports an alternative to this property, the WebkitTransition property.

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

Return the transition property:

object.style.transition

Set the transition property:

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

Value	Description
transitionProperty	Specifies the name of the CSS property the transition effect is applied to.
transitionDuration	Specifies how many seconds or milliseconds the transition effect takes to complete.
transitionTimingFunction	Specifies the speed curve of the transition effect.
transitionDelay	Defines when the transition effect will start.
initial	Sets this property to its default value. Seeinitial。
inherit	Inherits this property from its parent element. Seeinherit。

Default Value:	all 0 ease 0
Return Value:	A string, representing the transition property of an element.
CSS Version	CSS3

Other Extensions