animation

`@keyframes`

Defines a named animation sequence by describing intermediate style waypoints between from (0%) and to (100%). Elements reference the name via the animation-name property to play the sequence.

Syntax

@keyframes <name> { from { ... } to { ... } }

Common conditions / descriptors

Descriptor	Purpose
from	Alias for 0% — the animation's starting state
to	Alias for 100% — the animation's ending state
0% ... 100%	Any percentage waypoint between start and end
animation-timing-function	Set inside a keyframe to override easing for the next segment
!important (ignored)	Declarations with !important inside keyframes are ignored by spec

Examples

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.card { animation: fade-in 300ms ease-out; }

Simple two-stop fade-in used by a class

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

Multi-stop pulse using comma-separated selectors

@keyframes slide-up {
  0%   { transform: translateY(16px); opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: translateY(0); }
}

Compound animation with staged opacity

@media (prefers-reduced-motion: reduce) {
  .card { animation: none; }
}

Disable animation for users who prefer reduced motion

Gotcha

Properties that can't be interpolated (like display) snap at 50% by default. Always pair non-essential animations with a prefers-reduced-motion fallback.

Related at-rules

@property

Registers a typed CSS custom property so the engine knows its syntax, whether it inherits, and its initial value. This unlocks animation and transition of custom properties and rejects invalid values instead of falling back to the string type.

@media

Applies contained CSS rules only when the specified media query matches the user's device, viewport, or environment. It is the foundation of responsive design and print-specific styling.

@supports

Applies rules only when the browser supports the tested CSS feature, enabling progressive enhancement without JavaScript. Conditions can be combined with and, or, and not.

← All CSS at-rules · CSS properties · CSS selectors