CSS @keyframes At-Rule

Definition and Usage

The @keyframes at-rule defines the steps of a CSS animation. You name a keyframe list and set styles at points along the timeline, then attach that name with animation-name (or the animation shorthand).

Use from/to for a simple start and end, or percentages for middle steps. Prefer animating transform and opacity for smooth, efficient motion.

CSS Syntax

@keyframes <keyframes-name> {
  from | <percentage> { /* styles */ }
  to   | <percentage> { /* styles */ }
}

/* then attach the name */
.element {
  animation-name: <keyframes-name>;
  animation-duration: <time>;
}

from = 0%, to = 100%. You can list offsets in any order.

Keyframe Forms

How to Use @keyframes

Define the timeline, then attach it to an element.

1. Write an @keyframes block with a clear name.
2. Set styles at from/to or percentage offsets.
3. On the element, set animation-name to that same name.
4. Add animation-duration (required for motion to run).
5. Optionally set timing, delay, iteration, direction, and fill mode.

Live Preview

Switch keyframe styles on one box. Duration stays fixed so you can compare the motion pattern.

CSS Examples

Each snippet focuses on @keyframes. Duration and a matching name make the motion visible.

@keyframes colorChange {
  from {
    background-color: #2563eb;
  }
  to {
    background-color: #7c3aed;
  }
}

.box {
  animation: colorChange 2s ease-in-out infinite alternate;
}

@keyframes pulseSize {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

.box {
  animation: pulseSize 1.5s ease-in-out infinite;
}

@keyframes slideX {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(6rem);
  }
}

.box {
  animation: slideX 2s ease-in-out infinite alternate;
}

Key Takeaways