animation-name

Setting the names of the animation.

Overview

Examples

Choose the keyframes to run

Use animation-name:* to select a named keyframes rule while controlling the other animation parts separately.

<div class="animation-name:fade animation-duration:300ms animation-timing-function:ease-out">    Saved</div>

@layer utilities {    .animation-name\:fade {        animation-name: fade    }}@keyframes fade {    0% {        opacity: 0    }    to {        opacity: 1    }}

Disable an animation

Use animation-name:none when the element should keep the rest of its animation settings but stop running keyframes in a specific condition.

<div class="animation-name:fade animation-name:none@print">    No animation in print</div>

Combine with timing longhands

The name alone does not define how long the animation runs. Pair it with duration, timing, delay, iteration count, and fill mode as needed.

<span class="animation-name:fade animation-duration:200ms animation-fill-mode:both">    Appears once</span>

Apply conditionally

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

<div class="animation-name:fade:hover animation-name:fade@sm animation-name:none@print">...</div>