CSS Animations

Keyframe animations stage longer motion with named percentages. Pause looping decoration, avoid flashing, and keep a reduced-motion path that still communicates state.

CSS animations use @keyframes to stage longer motion. animation-name, duration, timing-function, delay, iteration-count, direction, and fill-mode control playback. Looping decorative animation should pause when it is not visible and must never flash.

Keyframes and the animation shorthand

@keyframes names percentages or from/to. fill-mode: both keeps the from state before the animation starts and the to state after it ends, which avoids a flash of the unstyled position. iteration-count: infinite needs a pause story.

@keyframes settle {
  from { opacity: 0; translate: 0 0.4rem; }
  to { opacity: 1; translate: 0 0; }
}
.notice { animation: settle 280ms ease both; }

Reduced motion still communicates

Replace a slide with an immediate opacity or border change. Do not hide the notice. Avoid flashing between high-contrast colors. If a loading indicator must remain, use a non-motion cue such as text status in addition to any spinner.

@media (prefers-reduced-motion: reduce) {
  .notice { animation: none; }
}
.notice[hidden] { display: none; }

• Name keyframes after the intent, such as settle, not anim1.
• Pause or remove looping decoration when it is off-screen.
• Scripts can depend on animation events; test reduced-motion overrides.

fill-mode prevents a flash

Without backwards fill, a delayed animation can sit in its unstyled position, then jump. both is a common choice for enter animations. Continue to CSS Accessibility when the question is whether the motion is required to understand the interface at all.