Keyframe Animations

Build complex, multi-step motion sequences using @keyframes.

CSS5 min readConcept 30 of 43

What are Keyframe Animations?

While CSS Transitions let you smoothly change between two states (like hovering over a button), they are limited to a single step from point A to point B.

Keyframe animations give you total control. Using the @keyframes rule, you can define a complex timeline of style changes at specific percentages (0%, 50%, 100%). You then attach this timeline to an element using the animation properties.

Why are they important?

Keyframes are essential for creating continuous loops (like a loading spinner), complex chained sequences (like an element bouncing, then fading out), or animations that trigger as soon as the page loads without waiting for a user interaction.

How do you use them?

First, define the timeline using @keyframes and give it a custom name (like slide-and-fade). Inside, use percentages to define the styles at different points in time.

Then, apply it to an element using animation-name and animation-duration. You can also control the loop count with animation-iteration-count, or the play direction with animation-direction.

Try it

Tweak the animation properties and watch how the keyframe timeline drives the motion of the target block.

Keyframe Timeline Controls

animation properties

Tweak the rules that control how the timeline plays.

Duration

2s
1s4s

Iteration Count

Direction

// 1. Define the timeline
@keyframes shape-shift {
0% {
transform: translate(0, 0);
border-radius: 16px;
}
50% {
transform: translate(80px, 0);
border-radius: 50%;
background: var(--color-pink);
}
100% {
transform: translate(40px, 80px);
border-radius: 16px;
}
}
// 2. Attach it
.target-box {
animation-name: shape-shift;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: normal;
}

Check yourself

Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.

  1. 1Which property is absolutely required for a keyframe animation to play?
  2. 2What does animation-direction: alternate do?
  3. 3How do you stop an element from snapping back to its original state when the animation ends?

Remember this

  • Define the timeline with @keyframes and a custom name.
  • Attach it to an element using animation-name and animation-duration.
  • Use infinite to loop it forever.
  • Use animation-fill-mode: forwards to prevent snapping back at the end.

Done with this concept?

Mark it complete to track your progress. No login needed.