CSS transition Property

The transition property is a shorthand property that can represent up to four longhand properties related to transitions.

The Transition properties enable elements to change values over a specified time period, animating the property changes rather than having them happen instantly. So, if we have a box with a red background that we want to change to a green background when we hover over it, we can use the transition property to change the background color.




Property Values

Value Description
transition-property Specifies the name of the CSS property for which the transition effect is intended.
transition-duration Specifies how many seconds or milliseconds it takes for the transition effect to complete.
transition-timing-function The speed curve of the transition effect is specified.
transition-delay When the transition effect will begin.
initial This property is set to its default value.
inherit This property is inherited from its parent element.

Supported Browsers

Property Chrome Firefox Safari Edge / IE Opera
transition 26.0 
4.0 -webkit-
4.0 -moz-
3.1 -webkit-
10.0 12.1 
10.5 -o-