Style transition Property

Hover over a div element to gradually change its appearance:

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

Description

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 numbers in the table specify the first browser version that fully supports the property.

Property
transition	26.0	10.0	16.0	6.1	12.1

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