Coding: Creating a Simple Animation

Published: 2025-08-21 Coding: Creating a Simple Animation

For kids

Learn how to make things move on your computer screen! We'll create a fun animation using basic coding.

What You'll Need

A computer with a web browser (like Chrome, Firefox, or Safari).
A text editor (like Notepad on Windows or TextEdit on Mac).
A little bit of patience!

Let's Code!

We'll use HTML and CSS to make a simple animation of a bouncing ball. Don't worry if you don't know these languages yet, we'll break it down step by step.

**Open Your Text Editor:** Open your text editor and create a new file.
**Write the HTML:** Type or copy and paste the following HTML code into your text editor. This creates the ball.

<!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>

**Save the File:** Save the file as "bouncing_ball.html". Make sure the file extension is ".html".
**Open in Your Browser:** Open the "bouncing_ball.html" file in your web browser. You should see a red ball bouncing up and down!

How it Works

Let's break down the code:

HTML: The HTML creates the ball (the `<div id="ball">` part).
CSS: The CSS gives the ball its shape (red circle), and tells it where to start (`position: relative;`).
Animation: The CSS animation (`animation-name: bounce;`) tells the ball to bounce. The `@keyframes bounce` part defines what "bounce" means – it moves the ball down and then back up.
`animation-iteration-count: infinite;` makes the ball bounce forever!

This is a simple example, but you can change the colors, size, and movement to create all sorts of animations!

Try This!

Try changing the `animation-duration` value in the CSS to make the ball bounce faster or slower. You can also change the color of the ball by changing the `background-color` property.

Coding animations is a fun way to bring your ideas to life! Keep experimenting and see what you can create.