Style transition Property

Definition and Usage

transition The property is a shorthand property of four transition properties:

Note:Always specify transitionDuration PropertyOtherwise, the duration is 0, and the transition will be invalid.

See also:

CSS Reference Manual:transition Property

Example

Hover over the div element to gradually change its appearance:

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

Try It Yourself

Syntax

Return the transition property:

object.style.transition

Set the transition property:

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

Property Value

Value Description
transitionProperty Specify the name of the CSS property that the transition effect targets.
transitionDuration Specify how many seconds or milliseconds the transition effect takes to complete.
transitionTimingFunction Specify the speed curve of the transition effect.
transitionDelay Define when the transition effect starts.
initial Set this property to its default value. See initial.
inherit Inherit this property from its parent element. See inherit.

Technical Details

Default Value: all 0 ease 0
Return Value: a string that represents the transition Property.
CSS Version: CSS3

Browser Support

The numbers in the table indicate the first browser version to fully support this property.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
26.0 10.0 16.0 6.1 12.1