Animations

What you'll learn

How to define a multi-step animation with @keyframes and apply it with the animation property.

Why it matters

Loading spinners, attention-grabbing buttons and entrance effects need motion that starts by itself and can repeat. Transitions only run when a state changes, but animations run on their own.

Explanation

An animation has two parts:

1. Keyframes describe what happens over time:

2. The animation property applies them to an element:

The shorthand takes the name, duration, timing function, and optional extras:

• infinite or a number: how many times to repeat.
• alternate: play forward then backward.
• animation-delay: wait before starting.
• animation-fill-mode: forwards: keep the final state when it ends.
• animation-play-state: paused: pause it.

Example

Step-by-step walkthrough

1. @keyframes bounce goes from no offset, up 30px at the halfway point, and back to no offset.
2. .ball runs it for 1 second, smoothly, forever (infinite).
3. @keyframes spin only has a to step, which means "from the current state, end at a full turn".
4. .square spins once every 2 seconds at a steady pace (linear).

Try it yourself

Change infinite to 3 so the ball bounces three times and stops. Then add animation-direction: alternate to the square.

Keyframe animationHTML / CSS

Editable code<style> @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-30px); } } .ball { width: 40px; height: 40px; margin-top: 40px; background: tomato; border-radius: 50%; animation: bounce 1s ease-in-out infinite; } </style> <div class="ball"></div>

Run ResetCopyCtrl+Enter to run

Common mistakes

• Misspelling the animation name, so nothing happens.
• Animating layout properties such as width and top, which is slow. Prefer transform and opacity.
• Endless distracting loops on important content.
• Forgetting forwards, so an element snaps back after a one-time animation.

Quick quiz

Summary

• Define steps with @keyframes, apply with animation.
• Control repeats, direction, delay and fill mode.
• Prefer transform and opacity and honour reduced-motion settings.

Next: common modern layout patterns.

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

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

<style>
  @keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-30px); }
  }
  @keyframes spin {
    to { transform: rotate(360deg); }
  }
  .ball {
    width: 40px;
    height: 40px;
    background: tomato;
    border-radius: 50%;
    animation: bounce 1s ease-in-out infinite;
  }
  .square {
    width: 40px;
    height: 40px;
    background: royalblue;
    margin-top: 40px;
    animation: spin 2s linear infinite;
  }
</style>

<div class="ball"></div>
<div class="square"></div>