CSS transition property specifies the transition duration, delay, timing function, and property name to apply transition on an element in one declaration. The transition property is a shorthand for the following transition properties:
Hover over the box below to see the transition effect:
Hover Over Me!!!
Example:
div{
width: 50%;
transition: width 3s ease 0s;
}
div:hover{
width: 90%;
}
Note: When declaring the transition property, always specify the transition-duration value. Otherwise, the transition will not be effective.
CSS Syntax
The transition property has the following syntax:
transition: transition-property duration timing-function delay|initial|inherit;
Property Values
The transition property accepts the following values:
| transition-property | Specifies the CSS property on which the transition will be applied. |
| transition-duration | Specifies the time duration that the transition will take to complete. |
| transition-timing-function | Specifies the type of transition function. |
| transition-delay | Specifies the time that the transition will take before starting. |
| initial | Sets the transition property to its default value. |
| inherit | Inherits the transition property from its parent element. |
General Info
| Default Value | all 0s ease 0s |
| Inherited | No |
| JavaScript Usage | element.style.transition = “width 2s ease 0s” |
