In this section, we will learn what the transition-duration property is and how to use it in CSS.
Click here to run the example of transition-duration property.
CSS transition-duration Property Definition and Usage
A transition has duration. At one point, it starts and no-matter how large or small the duration, it finally ends.
CSS provided a property named `transition-duration` by which we can control the duration of a transition.
CSS transition-duration Property Syntax
transition-duration: time|initial|inherit;
CSS transition-duration Property Value
The value of this property is a number of either of these two supported units:
- ms: stands for millisecond and is used to set a value based on millisecond.
- s: stands for second and is used to set a value based on second.
Note: the two global values “initial” and “inherit” can also be used for this property.
Example: transition-duration in CSS
See the Pen transition-duration in CSS by Omid Dehghan (@enjoytutorials1) on CodePen.
