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-duration:300ms animation-name:fade 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-duration:200ms animation-fill-mode:both animation-name:fade">  Appears once</span>

Apply conditionally

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

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