Bouncing Ball Animation | BimStudies.Com

Create an index.html File:

Open your text editor (e.g., VSCode, Sublime Text, or Notepad++).
Create a new file and save it as index.html inside your project folder.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bouncing Ball Animation</title>
</head>
<style>
    body{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
        background-color: #f0f0f0;
    }
    .ball{
        width: 50px;
        height: 50px;
        background-color: #ff5733;
        border-radius: 50%;
        animation: bounce 2s infinite
        ease-in-out;
        position: relative;
    }
    @keyframes bounce{
        0%, 100%{
            top: 0;
        }
        50%{
            top: 300px;
        }
    }
</style>
<body>
    <div class="ball"></div>
</body>
</html>

HTML Structure:

Thank you for reading this post, don't forget to subscribe!

A simple HTML structure with a single div element that represents the ball.

CSS Styling:

The body element is styled to center the ball both vertically and horizontally using flexbox.
The .ball class is given specific dimensions, a background color, and rounded corners to make it a circle.
The animation property is used to apply the bounce animation to the ball. This animation will run indefinitely (infinite) with a duration of 2 seconds and an ease-in-out timing function.
The @keyframes rule defines the bounce animation, specifying how the element should change at different points during the animation cycle. At 0% and 100%, the ball is at the top (starting position), and at 50%, the ball is at the bottom (300px down).

Beginners Projects

Create an index.html File:

How can we help?