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.
Syntax
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- |
16.0
4.0 -moz- |
6.1
3.1 -webkit- |
10.0 |
12.1
10.5 -o- |