animation-duration

Setting the length of time that an animation takes to complete one cycle.

Overview

Examples

Set animation speed

Use animation-duration:* to define how long one cycle of the keyframes takes.

<div class="animation-name:fade animation-duration:300ms animation-fill-mode:both">    Fades in</div>

@layer utilities {    .animation-duration\:300ms {        animation-duration: 300ms    }}

Slow down looping motion

Looping indicators should often use a steady, readable duration so they do not distract from nearby content.

<svg class="animation-name:rotate animation-duration:1s animation-timing-function:linear">    ...</svg>

Remove animation in static output

Use animation-duration:0ms when an animation should resolve immediately in print or other static contexts.

<div class="animation-duration:300ms animation-duration:0ms@print">    Static print state</div>

Apply conditionally

Apply styles based on different states using selectors and conditional queries.

<div class="animation-duration:300ms:hover animation-duration:1s@sm animation-duration:0ms@print">...</div>