Motion
animation-name
Selecting the keyframes that an animation runs.
Overview
| Class | Declarations |
|---|---|
animation-name:none | animation-name: none;
|
animation-name:<name>,<…> | animation-name: <name>,<…>;
|
Examples
Choose the keyframes to run
Select the preset fade or rotate keyframes while keeping the same duration and linear easing.
Choose the keyframes to run
Play opts into the actual CSS animation. Pause retains its time; Replay restarts even a finished one-shot. Readouts show native timeline time and progress, including delay and fill.
<!-- Fade keyframes --><div class="flex items-center gap-md p-sm"> <svg id="target" aria-hidden="true" width="48" height="48" viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="2" class="text-blue animation-duration:1s animation-fill-mode:forwards animation-name:fade animation-timing-function:linear animation:none@print animation-play-state:paused@reduce-motion"> <circle cx="24" cy="24" r="17" opacity=".25" /> <path d="M24 8v16h12 M19 13l5-5 5 5" /> </svg> <span class="font-sm">Fade keyframes</span></div><!-- Rotate keyframes --><div class="flex items-center gap-md p-sm"> <svg id="target" aria-hidden="true" width="48" height="48" viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="2" class="text-blue animation-duration:1s animation-fill-mode:forwards animation-name:rotate animation-timing-function:linear animation:none@print animation-play-state:paused@reduce-motion"> <circle cx="24" cy="24" r="17" opacity=".25" /> <path d="M24 8v16h12 M19 13l5-5 5 5" /> </svg> <span class="font-sm">Rotate keyframes</span></div>Generated CSS
@layer utilities { .animation-name\:fade { animation-name: fade }}@keyframes fade { 0% { opacity: 0 } to { opacity: 1 }}A name must match a keyframes rule. An unknown name has no effect, and the initial duration is zero, so a name alone does not create visible travel.
Disable an animation
Compare the same timing settings with rotate selected and with none. The second indicator remains static.
Disable an animation
Play opts into the actual CSS animation. Pause retains its time; Replay restarts even a finished one-shot. Readouts show native timeline time and progress, including delay and fill.
<!-- Rotate selected --><div class="flex items-center gap-md p-sm"> <svg id="target" aria-hidden="true" width="48" height="48" viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="2" class="text-blue animation-duration:2s animation-iteration-count:infinite animation-name:rotate animation-timing-function:linear animation:none@print animation-play-state:paused@reduce-motion"> <circle cx="24" cy="24" r="17" opacity=".25" /> <path d="M24 8v16h12 M19 13l5-5 5 5" /> </svg> <span class="font-sm">Rotate selected</span></div><!-- None selected --><div class="flex items-center gap-md p-sm"> <svg id="target" aria-hidden="true" width="48" height="48" viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="2" class="text-blue animation-duration:2s animation-iteration-count:infinite animation-name:none animation-timing-function:linear animation:none@print animation-play-state:paused@reduce-motion"> <circle cx="24" cy="24" r="17" opacity=".25" /> <path d="M24 8v16h12 M19 13l5-5 5 5" /> </svg> <span class="font-sm">None selected</span></div>None removes the animation; it does not pause at the current frame. Other longhand values remain set, but no keyframes run. Both examples also remove animation in print.
Combine with timing longhands
Pair the name with an explicit one-second duration, 300ms delay, linear easing and both fill.
Combine with timing longhands
Play opts into the actual CSS animation. Pause retains its time; Replay restarts even a finished one-shot. Readouts show native timeline time and progress, including delay and fill.
@theme { @keyframes layer-slide { from { transform: translateX(24px); } to { transform: translateX(96px); } }}<!-- Complete timing · one cycle --><div class="w:240px max-w:100%"> <p class="mb-sm font-mono font-xs text-muted">Base 0 · start 24 · end 96px</p> <div aria-hidden="true" class="h:56px p-xs outline:1px|dashed|var(--color-line-muted)"> <span id="target" class="grid place-items:center h:40px w:48px b:1px|solid|var(--color-blue-60) r-sm bg-blue-10 fg-blue-80 transform:none animation-delay-slow animation-duration:1s animation-fill-mode:both animation-iteration-count:1 animation-name:layer-slide animation-timing-function:linear animation:none@print animation-play-state:paused@reduce-motion">→</span> </div></div>The readout separates the selected name from its timing. For multiple names, other longhand lists match by position: shorter lists repeat and extra values are unused.
Apply conditionally
Resize to select no animation below sm or rotate at sm. Then press Play to inspect the selected timeline.
Apply conditionally
Play opts into the actual CSS animation. Pause retains its time; Replay restarts even a finished one-shot. Readouts show native timeline time and progress, including delay and fill.
<!-- None → rotate at sm --><div class="flex items-center gap-md p-sm"> <svg id="target" aria-hidden="true" width="48" height="48" viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="2" class="text-blue animation-duration:2s animation-iteration-count:infinite animation-name:none animation-timing-function:linear animation:none@print animation-play-state:paused@reduce-motion animation-name:rotate@screen@sm"> <circle cx="24" cy="24" r="17" opacity=".25" /> <path d="M24 8v16h12 M19 13l5-5 5 5" /> </svg> <span class="font-sm">None → rotate at sm</span></div>The viewport changes the actual animation-name. Removing the name cancels the animation; selecting it again creates a new animation rather than resuming a paused one.