transition-duration sets the interpolation time for a CSS transition. It is separate from the wait before that interpolation, which is transition-delay.
Compare instant and one-second changes
Checking the control moves both squares. The first jumps immediately; the second moves over one second.
HTML and CSS
HTML
<input class="change" id="change" type="checkbox" /><label for="change"
>Move the square</label
>
<div class="stage">
<p>0s</p>
<div class="box instant" aria-hidden="true"></div>
<p>1s</p>
<div class="box slow" aria-hidden="true"></div>
</div>CSS
.stage {
padding: 1rem;
background: #eff6ff;
min-height: 60px;
}
.box {
width: 60px;
height: 45px;
background: #2563eb;
}
label {
display: inline-block;
padding: 0.75rem;
}
.box {
margin-block: 0.5rem;
transition-property: transform;
}
.instant {
transition-duration: 0s;
}
.slow {
transition-duration: 1s;
}
.change:checked ~ .stage .box {
transform: translateX(100px);
}
@media (prefers-reduced-motion: reduce) {
.box {
transition-duration: 0s;
transition-delay: 0s;
}
}Edit HTML or CSS to update the preview as you type. Copy code snippet copies the selected tab. Preview spacing and font defaults are not included.
Keep separate durations for separate values
Transform takes 600ms while the background changes in 200ms. A nonzero duration makes each existing property change visible.
HTML and CSS
HTML
<input class="change" id="change" type="checkbox" /><label for="change"
>Move the square</label
>
<div class="stage"><div class="box" aria-hidden="true"></div></div>CSS
.stage {
padding: 1rem;
background: #eff6ff;
min-height: 60px;
}
.box {
width: 60px;
height: 45px;
background: #2563eb;
}
label {
display: inline-block;
padding: 0.75rem;
}
.box {
transition-property: transform, background-color;
transition-duration: 600ms, 200ms;
}
.change:checked ~ .stage .box {
transform: translateX(100px);
background: #0f766e;
}
@media (prefers-reduced-motion: reduce) {
.box {
transition-duration: 0s;
transition-delay: 0s;
}
}Edit HTML or CSS to update the preview as you type. Copy code snippet copies the selected tab. Preview spacing and font defaults are not included.
Values and defaults
The initial value is 0s and the property is not inherited. Use nonnegative times with s or ms units. Negative duration is invalid, unlike negative delay. A comma-separated list matches the transition-property list; shorter duration lists repeat.
Common mistakes
Duration alone does not change a value. A zero duration provides no interpolation, although a positive delay may still postpone a switch. A long duration can make state changes difficult to follow. Changing layout dimensions may require layout work during the transition, so inspect actual performance rather than assuming every short transition is cheap.
The original lesson had an unclosed CSS block and a Tailwind-only sample; both are replaced here with complete native CSS. Learn transition-delay, transition-property, and transition.
Sources and browser support
MDN: transition-duration describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.