BrightKidz Library
Subjects
A bouncing ball built from three keyframes A ball travels along a dashed arc from the ground on the left, up over the top, and back down to the ground on the right. Only three positions are drawn solid: the start, the highest point and the end. Small hollow circles show the in-between positions the browser works out for itself, and a dashed line drops from each solid position to a marker on the ground.

Coding: Creating a Simple Animation

About 5 minutes

An animation on a web page is not a video. Nothing was filmed. You tell the browser where something should be at the start, where it should be in the middle, and where it should end — and the browser works out every position in between, sixty times a second.

That instruction is called a keyframe, and you only ever write the corners.

The Code

<!DOCTYPE html>
<html>
<head>
  <title>Bouncing Ball</title>
  <style>
    #ball {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: red;
      position: relative;
      animation-name: bounce;
      animation-duration: 2s;
      animation-iteration-count: infinite;
    }
    @keyframes bounce {
      0%   {top: 0px;}
      50%  {top: 200px;}
      100% {top: 0px;}
    }
  </style>
</head>
<body>
  <div id="ball"></div>
</body>
</html>
  1. Open your text editor and start a new file.
  2. Type the code above.
  3. Save it as bouncing_ball.html — the .html ending is what makes it a web page.
  4. Drag the saved file into your browser. A red ball bounces, and keeps bouncing.

Reading the Keyframes

The three lines inside @keyframes bounce are the whole animation:

The browser fills in everything between those three moments. You never wrote "move down a bit" — you wrote where it should be, and the movement is what that looks like from outside.

Because animation-duration is 2s, the whole down-and-up takes two seconds. Because animation-iteration-count is infinite, it starts again immediately.

Change the 200 and Watch

The 200px on the 50% line is the lowest point of the bounce. Drag the slider to see what different values do to it.

The bouncing ball's two keyframe positions A ball on a web page. A dashed line near the top marks where the ball sits at the 0% and 100% keyframes. The ball itself is drawn at the 50% keyframe, the lowest point of the bounce, and moves down as the keyframe value is increased from 0 to 200 pixels. 0% and 100% — the start 50% — the lowest point

The dashed line is the ball's starting position at 0% and 100%. The solid ball is where it gets to at 50%. Set the slider to 0 and the two keyframes match, so nothing appears to happen at all — the ball animates from where it is, to where it is.

The keyframes put the ball at top 0px at 0%, and at top 200px at 50%. The whole bounce takes 2 seconds. When is the ball at its lowest?

Make It Yours

Save and reload after each change. The bounce you get is the direct result of numbers you can see and edit, which is the whole reason this is coding and not a video.