CSS Keyframes Tutorial — Bouncing Ball Animation

Think of a flipbook: you draw a ball at the bottom of the page, then a little higher, then at the top — and when you flip the pages fast, the ball bounces. You did not draw every in-between position; your eyes filled them in. CSS keyframes work the same way. You describe the important moments — the start, the middle, the end — and the browser draws everything in between, smoothly, all by itself.

Diagram — see how it fits together

Keyframes and the animation properties

An animation has two parts. First, the @keyframes rule, which names the animation and lists its stops. Second, the animation properties on the element, which say which keyframes to play and how: animation-name, animation-duration (how long one run takes), animation-timing-function (the speed curve), animation-delay (wait before starting), animation-iteration-count (how many times — or infinite), animation-direction, and animation-fill-mode.

@keyframes bounce {
  0%   { top: 0; }
  50%  { top: 180px; }
  100% { top: 0; }
}
.ball { animation: bounce 2s ease-in-out infinite; }

The shorthand animation: bounce 2s ease-in-out infinite; packs the name, duration, timing function, and iteration count into one line — the same order as the longhand properties.

From and to, or percentages

Simple animations use from and to — just a start and an end, like fading from nearly invisible to fully visible. When you need stops in the middle, use percentages: 0% is the start, 100% is the end, and 50% is halfway through. The bouncing ball above uses three stops: top, bottom, top. Percentages also let one property change at a different time from another — the colour can change at 25% while the position changes at 50%.

Animation versus transition

A transition needs a trigger — usually a hover — and it moves between two states. An animation needs no trigger: it runs on its own as soon as the page loads, it can have many stops, and it can repeat forever. That makes animations right for things that should move by themselves — a bouncing ball, a pulsing notification dot, a loading spinner — while transitions stay right for hover effects.

Common mistakes

• Forgetting animation-duration — without a duration the animation defaults to 0 seconds and nothing appears to happen.
• Writing the keyframes name differently from animation-name — the names must match exactly, or the browser finds no animation to play.
• Animating top or left on an element that is not positioned — those properties only move elements with position: relative, absolute, or fixed.
• Expecting the element to stay at its final keyframe — without animation-fill-mode: forwards; it snaps back to its normal style.
• Using animation: infinite; alone — the shorthand needs at least a name and a duration; a bare iteration count is not enough.

Remember

• @keyframes lists the important stops; the browser draws everything in between.
• from/to is two stops; percentages give you as many stops as you need.
• animation: name duration timing-function iteration-count; is the shorthand order.
• Animations run on their own; transitions need a trigger like hover.
• animation-fill-mode: forwards; keeps the final keyframe after the animation ends.

Example explained

• @keyframes bounce { 0% { top: 0; } 50% { top: 180px; } 100% { top: 0; } } — the ball starts at the top, drops to the bottom halfway through, and returns to the top at the end.
• .ball { animation: bounce 2s ease-in-out infinite; } — the bounce runs for 2 seconds, eases in and out, and repeats forever.
• @keyframes fadein { from { opacity: 0.2; } to { opacity: 1; } } — the green box fades from nearly invisible to fully visible, using just two stops.
• .fade-box { animation: fadein 3s ease-in-out infinite alternate; } — the fade lasts 3 seconds and plays forward then backward, so it never snaps.
• .ball { position: absolute; } — the ball is positioned inside the white stage, which is why animating top moves it at all.