The @keyframes rule defines a named sequence of styles at specific points along an animation's timeline, which the animation property then references to actually play that animation on an element.

Syntax

@keyframes animation-name {
  0% { /* start styles */ }
  100% { /* end styles */ }
}

Deep Dive Course

Percentages within a @keyframes block, from 0%, or the from keyword, to 100%, or to, mark specific points along the animation's overall timeline, each specifying what the animated properties' values should be at that exact point, with the browser automatically interpolating smooth intermediate values between each defined keyframe. Unlike a transition, which only ever animates between exactly two states, a starting value and an ending value, @keyframes can define any number of intermediate steps in between, like 0%, 50%, and 100%, enabling considerably more complex, multi-stage animations, like a bouncing or pulsing effect, that a simple two-state transition alone couldn't represent.

1Understanding Keyframes

💡

@keyframes only defines the animation's sequence of styles — it does nothing on its own until an element's animation property actually references that keyframe name, along with a duration, to actually play it.

editor.html

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

.element {
  animation: fadeIn 0.5s ease;
}

localhost:3000

2Practical Example

Here is a real-world application of Keyframes showing how it is used in production CSS code.

editor.html

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

.ball {
  animation: bounce 1s ease-in-out infinite;
}

localhost:3000

3Best Practices

Follow these guidelines when working with Keyframes:

1. Use @keyframes, rather than a transition, whenever an animation needs more than just a simple two-state, start-to-end change, like a multi-stage bounce or pulse effect

2. Reference the exact @keyframes name in an element's animation property, along with an explicit duration, since defining @keyframes alone has no visible effect without that

3. Use percentage-based keyframe steps, like 0%, 50%, 100%, for finer control over an animation's intermediate stages, rather than being limited to just a start and end point

⚠️

Tip: @keyframes only defines the animation's sequence of styles — it does nothing on its own until an element's animation property actually references that keyframe name, along with a duration, to actually play it.

editor.html

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

.element {
  animation: fadeIn 0.5s ease;
}

localhost:3000

Examples

Example 01Basic Usage

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

.element {
  animation: fadeIn 0.5s ease;
}

Example 02Advanced Example

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

.ball {
  animation: bounce 1s ease-in-out infinite;
}

Best Practices

Use @keyframes, rather than a transition, whenever an animation needs more than just a simple two-state, start-to-end change, like a multi-stage bounce or pulse effect
Reference the exact @keyframes name in an element's animation property, along with an explicit duration, since defining @keyframes alone has no visible effect without that
Use percentage-based keyframe steps, like 0%, 50%, 100%, for finer control over an animation's intermediate stages, rather than being limited to just a start and end point

Interview Question

Why can @keyframes-based animations represent more complex motion, like a bounce with a middle peak, that a simple CSS transition fundamentally cannot?▼

Hint: Think about how many distinct states, or points along a timeline, a transition is capable of animating between, compared to @keyframes.

A CSS transition is fundamentally designed to interpolate smoothly between exactly two states, whatever the watched property's value was before the change and whatever it becomes after, it has no built-in mechanism at all for defining any additional intermediate states along the way, the animation path between those two endpoints is always a single, direct, gradual interpolation with no defined stops in between. @keyframes, by contrast, allows defining any number of distinct percentage-based points along the entire animation timeline, each specifying its own exact property values, which means an animation like a bounce, needing to move from a resting position, up to a peak, and back down to that same resting position, three genuinely distinct states, not just two, can be expressed directly as three keyframe steps, at 0%, 50%, and 100%, with the browser smoothly interpolating between each successive pair of defined keyframes in turn. This capacity for multiple, arbitrarily many intermediate states along a single unified timeline is exactly the structural capability a two-state transition inherently lacks, and precisely why @keyframes is the necessary tool for any animation involving genuinely more complex motion than a single, direct start-to-end change.

Exercises

MediumPractice using Keyframes in a real scenario.

View Solution

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

.element {
  animation: fadeIn 0.5s ease;
}

Frequently Asked Questions

Why can @keyframes-based animations represent more complex motion, like a bounce with a middle peak, that a simple CSS transition fundamentally cannot?▼

Related Functions

AnimationAnimation-durationTransition