What Is the CSS @keyframes Rule and Syntax?

The CSS @keyframes at-rule controls intermediate steps in a CSS animation sequence by defining styles at specific milestones along a timeline. By establishing keyframes, developers gain precise control over CSS property shifts without relying on JavaScript, enabling fluid transitions, looped micro-interactions, and complex multi-stage UI motion.

Understanding the Syntax of @keyframes

The @keyframes rule requires a custom identifier (an animation name) followed by a block containing style declarations mapped to specific progress markers.

@keyframes slideAndFade {
  0% {
    opacity: 0;
    transform: translateX(-50px);
  }
  50% {
    opacity: 0.5;
    transform: translateX(10px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

Keyframe Selectors

Keyframe progress is defined using percentages or keywords:

  • Percentages (0% to 100%): Percentages represent points along the animation's total duration. You can declare as many intermediate percentages as needed to create multi-stage paths.
  • from and to: Shorthand aliases for 0% and 100% respectively, commonly used for simple, two-state transitions.
  • Combined Selectors: Multiple percentages can share identical styles by separating them with commas (e.g., 0%, 100% { transform: scale(1); }).

Binding Keyframes to Elements

Declaring an @keyframes block defines the animation logic, but it does not run until it is assigned to an element using CSS animation properties.

.notification-card {
  animation-name: slideAndFade;
  animation-duration: 0.8s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

Alternatively, the animation shorthand combines these properties into a single rule:

.notification-card {
  animation: slideAndFade 0.8s ease-out forwards;
}

Core Animation Properties

  • animation-name: References the specific @keyframes identifier.
  • animation-duration: Sets the length of one complete animation cycle (e.g., 300ms, 2s).
  • animation-timing-function: Dictates acceleration curves, such as linear, ease, ease-in-out, or custom cubic-bezier() functions.
  • animation-delay: Pauses execution before the animation starts.
  • animation-iteration-count: Specifies repetitions, using a number or the infinite keyword.
  • animation-direction: Controls cycle playback order (normal, reverse, alternate, alternate-reverse).
  • animation-fill-mode: Determines how styles apply before execution starts or after it finishes (forwards, backwards, both, none).

Practical Utility in Modern Web Development

The @keyframes rule provides distinct advantages over traditional transition-based or script-driven animation methods:

  • Multi-Step Sequencing: Unlike CSS transition, which only animates between an initial and a final state, @keyframes supports complex sequences with directional reversals, staggered property changes, and precise midpoint adjustments.
  • Autonomous and Looping Animations: Elements can animate continuously on page load—such as loading spinners, pulsing status indicators, or background ambient effects—without user triggers like hover or focus.
  • Hardware Acceleration and Performance: Animating properties such as transform and opacity inside @keyframes runs directly on the browser's compositor thread, offloading calculations to the GPU and preventing layout reflows or repaints.
  • Accessible Motion Control: @keyframes animations integrate cleanly with media queries like @media (prefers-reduced-motion: reduce), allowing developers to pause, reduce, or simplify visual motion for users with vestibular sensitivities.