Hover over a div element to gradually change its appearance:
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:
Set the transition property:
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 |
CSS reference: transition property