Easy Tutorial
❮ Met Element Queryselector Prop Color Value ❯

Style transition Property

Style Object

Example

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


Definition and Usage

The transition property is a shorthand property for setting the 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.


Browser Support

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

Safari supports an alternative property, WebkitTransition.

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

Syntax

Return the transition property:

Set the transition property:

Property Values

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

Technical Details

Default value: all 0 ease 0
Return value: String, representing the transition property of the element.
--- ---
CSS version CSS3
--- ---

Related Articles

CSS Reference: transition Property


Style Object

❮ Met Element Queryselector Prop Color Value ❯