In this tutorial, you’ll learn how to create a simple animation using HTML, CSS, and a tiny bit of JavaScript. We’ll make a bouncing ball — perfect for beginners and great for learning how web animations work.

You only need:

1. A computer
2. A browser (Chrome, Edge, etc.)
3. A text editor (Notepad, VS Code, or anything you like)
4. I suggest RealtimeHTML if you don't have software or just don't want to download anything (Online HTML Editor & Renderer - Real-time Live Preview | Free HTML Tester)

If you want to use a web-based editor, skip to step 2

Make a new folder on your computer and name it something like:

Inside it, create a new file called:

Open index.html or your web-based text editor and paste this:

1. HTML Structure

Tells the browser this is an HTML5 document.

The root element of the webpage. Everything goes inside it.

Contains information about the page that isn't directly shown on the screen.

Sets the text shown in the browser tab.

Example:

2. CSS Styling

Everything inside this tag is CSS (Cascading Style Sheets), which controls appearance.

Body Styling

Targets the entire webpage.

Sets the page background color.

#f0f0f0 is a light gray.

Turns the body into a Flexbox container.

Flexbox helps position elements easily.

Centers items horizontally.

Without it:

With it:

Centers items vertically.

Makes the body height equal to 100% of the browser window.

1. vh = Viewport Height
2. 100vh = Full screen height

Removes the browser's default margins around the page.

Without it, browsers leave small white borders.

Ends the body styling block.

Ball Styling

Targets the element with:

The # symbol means "ID selector".

Ball width = 50 pixels.

Ball height = 50 pixels.

Makes the ball red.

Turns the square into a circle.

Without:

With:

Allows the element to move using top, left, etc.

The animation changes the top value.

Animation Property

This is shorthand for several animation settings.

bounce

The animation name.

It matches:

1s

Animation lasts 1 second.

infinite

Repeat forever.

alternate

Instead of restarting:

it goes:

So the ball moves up and down.

ease-in-out

Makes movement smoother.

Instead of:

it does:

More natural motion.

3. Keyframes Animation

Defines the animation called bounce.

Think of keyframes as instructions for what happens over time.

Starting Position

At the beginning:

Ball is in its original position.

Ending Position

At the end:

Ball moves 200 pixels downward.

Visual

Start:

End:

The ball drops 200 pixels.

Because of alternate, it then rises back up.

4. End of CSS

Ends the CSS section.

Ends the page header.

5. Page Content

Everything visible on the page goes here.

Creates an empty box.

Because CSS styles it:

1. 50×50 pixels
2. Red
3. Circular

it becomes the ball.

Ends the page.

What Happens When You Open It

1. Browser loads the page.
2. The body fills the screen.
3. Flexbox centers the ball.
4. The ball is drawn as a red circle.
5. The bounce animation starts.
6. The ball moves down 200px.
7. The ball moves back up.
8. Steps 6–7 repeat forever.

Animation Timeline

The result is a smooth bouncing red ball in the center of the screen.

You can change the ball color:

Or make it bigger:

Or make it bounce faster:

Experiment and have fun.

f you want the ball to move left and right too, add this inside <style>:

Then update the ball:

css

Now the ball moves in two directions.

Save your file and double‑click index.html.

if you are using realtimeHTML it will appear instantly to the right of the code

Your animation should appear immediately.

If you want to share it:

1. Upload the file to Instructables
2. Add screenshots of your code
3. Add a short video or GIF of the animation running

You just created your first HTML animation! This project teaches the basics of:

1. HTML structure
2. CSS styling
3. CSS keyframe animations
4. Optional JavaScript movement

You can build on this to make games, interactive pages, or more advanced animations.