What You’ll Learn

The @keyframes at-rule defines the steps of a CSS animation. Give it a name, describe how styles change over time, then apply it with the animation property.

Introduction

The @keyframes at-rule in CSS defines how an animation progresses over time. Each keyframe is a snapshot of styles at a specific moment on the timeline. The browser smoothly interpolates between those snapshots to create motion and visual change.

Definition and Usage

@keyframes is not a CSS property — it is an at-rule, like @media or @font-face. It only defines an animation. To run it, you must apply the animation property (or its longhand parts like animation-name and animation-duration) on an element.

The name you give your @keyframes block must match the animation-name you use on the element. For example, @keyframes fadeIn pairs with animation: fadeIn 1s;.

📝 Syntax

The simplest form uses from and to for the start and end states:

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

Use percentage values when you need steps in between:

@keyframes bounce {
  0% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
  100% { transform: translateY(0); }
}

Apply the animation to an element:

.box {
  animation: fadeIn 1s ease-out forwards;
}

Keyframe Selectors

Animation Shorthand Parts

• animation-name — Must match the @keyframes name.
• animation-duration — How long one cycle takes (e.g. 2s, 500ms).
• animation-timing-function — Speed curve: ease, linear, ease-in-out.
• animation-iteration-count — 1, infinite, or a number.
• animation-fill-mode — forwards keeps the final state after the animation ends.

When to Use @keyframes

Reach for @keyframes when you need motion or change over time:

• Loading indicators — Spinners, pulses, and skeleton screens.
• Micro-interactions — Button hover effects, icon bounces, notification badges.
• Entrance effects — Fade-in cards, slide-up modals, reveal on scroll.
• Attention cues — Gentle highlights that draw the eye without being distracting.
• Decorative motion — Background gradients, floating shapes, hero animations.

For instant state changes with no intermediate steps, transition is simpler. Use @keyframes when you need multi-step or repeating animations.

Examples Gallery

Practice @keyframes with from/to animations, percentage steps, transform motion, and the animation shorthand.

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

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

@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15); opacity: 0.7; }
  100% { transform: scale(1); opacity: 1; }
}

.dot {
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes slideRight {
  from { transform: translateX(0); }
  to { transform: translateX(120px); }
}

.slider {
  animation: slideRight 2s ease-in-out infinite alternate;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

💬 Usage Tips

• Match names exactly — @keyframes fadeIn requires animation-name: fadeIn.
• Prefer transform + opacity — Smoothest performance for most animations.
• Use alternate — animation-direction: alternate reverses on each cycle.
• Keep durations short — UI animations often work best between 200ms and 1s.
• Test reduced motion — Wrap animations in @media (prefers-reduced-motion: no-preference).

⚠️ Common Pitfalls

• Name mismatch — A typo in the animation name means nothing runs.
• Forgetting animation property — @keyframes alone does nothing without animation.
• Animating layout properties — width, height, and margin can cause jank.
• Too many infinite loops — Constant motion distracts users and drains battery.
• Confusing with transition — transition handles A-to-B on hover; @keyframes handles multi-step timelines.

♿ Accessibility

• prefers-reduced-motion — Disable or simplify animations for users who request reduced motion.
• No essential information in motion — Do not hide content that only appears during an animation.
• Avoid seizure triggers — No rapid flashing (more than 3 flashes per second).
• Pause decorative loops — Consider letting users stop infinite animations.
• aria-hidden on decorative motion — Purely visual animations should not confuse screen readers.

💡 Best Practices