CSS transition-duration Property Tutorial

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.


Top Technologies