CSS Keyframes (@keyframes, Animation Timing & Hardware Acceleration)

CSS Keyframes (@keyframes) represent a declarative syntax defined in the CSS Animations Level 1 & Level 2 W3C specifications. They allow frontend engineers to orchestrate multi-step, autonomous animation sequences by establishing intermediate property milestones (percentage stops from 0% to 100% or from/to) that the browser rendering engine smoothly interpolates over time.

Visually generate, preview, and customize keyframe animations and easing curves in real time using our CSS Animation Generator, format and validate your stylesheets with the CSS Formatter, or test mobile interaction rendering in the Responsive Design Tester.

---

Technical Specifications at a Glance

Specification	Details
Standard Body	World Wide Web Consortium (W3C) CSS Working Group
Living Standards	CSS Animations Level 1 & Level 2
At-Rule Directive	@keyframes <animation-name> { <keyframe-block-list> }
Shorthand Property	animation: <name> <duration> <timing-function> <delay> <iteration-count> <direction> <fill-mode> <play-state>
Timing Functions	linear, ease, ease-in, ease-out, ease-in-out, cubic-bezier(x1, y1, x2, y2), steps(n, jump-term)
Composited Properties	transform (translate, rotate, scale, skew), opacity, filter
Accessibility Media Query	@media (prefers-reduced-motion: reduce)

---

The CSS Animation Pipeline & Compositor Acceleration

Browser rendering engines (Blink, Gecko, WebKit) execute animation loops through three distinct rendering phases:

┌─────────────────┐       ┌─────────────────┐       ┌────────────────────────┐
│     Layout      │  ──▶  │      Paint      │  ──▶  │       Composite        │
│ (Reflow / CPU)  │       │ (Raster / CPU)  │       │ (GPU Compositor Thread)│
└─────────────────┘       └─────────────────┘       └────────────────────────┘

1. Layout (Reflow): Triggered by geometric properties (width, height, top, left, margin). Computing reflow on every frame forces main-thread layout thrashing and drops frames below 60fps.
2. Paint (Rasterization): Triggered by visual appearance changes (background-color, box-shadow, color). Modifies pixels without changing geometry, but incurs continuous CPU painting overhead.
3. Composite (GPU Offloading): Triggered exclusively by transform and opacity. The browser promotes the element to an isolated GPU render layer, allowing smooth 60fps/120fps hardware acceleration that runs uninterrupted even during heavy JavaScript execution.

---

Keyframe Anatomy & Syntax

/* 1. Define Keyframe Sequence */
@keyframes slideAndPulse {
  0% {
    transform: translateY(-20px) scale(0.95);
    opacity: 0;
  }
  60% {
    transform: translateY(4px) scale(1.02);
    opacity: 1;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

/* 2. Apply Animation to DOM Selector */
.card-enter {
  animation-name: slideAndPulse;
  animation-duration: 400ms;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  animation-delay: 100ms;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: both;
}

/* Shorthand Equivalent */
.card-enter-shorthand {
  animation: slideAndPulse 400ms cubic-bezier(0.16, 1, 0.3, 1) 100ms 1 normal both;
}

---

Animation Properties Reference

• animation-name: Maps to the identifier defined by @keyframes.
• animation-duration: The length of time (e.g. 500ms, 2s) that one cycle takes to complete.
• animation-timing-function: Mathematical acceleration curve (cubic-bezier or steps) governing value interpolation between adjacent keyframe milestones.
• animation-delay: Time offset before animation execution begins. Negative delays cause the animation to begin immediately mid-cycle.
• animation-iteration-count: Number of times the animation repeats (1, 3, or infinite).
• animation-direction: Traversal orientation (normal, reverse, alternate, alternate-reverse).
• animation-fill-mode: Determines how styles apply outside execution time (none, forwards to persist end state, backwards to apply initial state during delay, both).
• animation-play-state: Runtime pause/resume state (running or paused).

---

Accessibility: prefers-reduced-motion

WCAG 2.2 guideline 2.3.3 requires web applications to provide alternatives or disable vestibulo-ocular triggering animations for users who have configured system-level motion reduction:

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

---

Related Tools & References

• CSS Animation Generator — Create, preview, and export custom keyframes and cubic-bezier easing curves.
• CSS Formatter — Clean, format, and validate complex CSS stylesheets.
• Responsive Design Tester — Test responsive micro-interactions across mobile and desktop viewports.
• CSS Selectors Glossary — Master specificity vectors and modern relational pseudo-classes.
• CSS Glossary — Cascading Style Sheets fundamentals, box model, and layout engines.