Style transition Property
Hover over a div element to gradually change its appearance:
Try it yourself »
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:
Set the transition property:
|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 reference: transition property
Thank You For Helping Us!
Your message has been sent to W3Schools.