Style transition Property

Hover over a div element to gradually change its appearance:

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

Definition and Usage

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

transitionProperty, transitionDuration, transitionTimingFunction, and transitionDelay.

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

The transition property is supported in Internet Explorer 10, Firefox, Opera, and Chrome.

Safari supports an alternative, the WebkitTransition property.

Note: The transition property is not supported in Internet Explorer 9 and earlier versions.

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 for
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. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

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