The Bouncing Ball Effect gif
Bouncing Ball Animation gif

Learn how to create Bouncing Ball Animation using only HTML and CSS.

Watch the Bouncing Ball animation tutorial video here-




The VS Code extensions used in this video are Live Server and Prettier.

HTML Source Code-

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bouncing ball effect</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div class="box">
        <div class="ball"></div>
    </div>
</body>
</html>

Download HTML source file

CSS Source Code-

*{
    padding:0px;
    margin: 0px;
    background-color: rgb(65, 65, 65);
}

.box{
    position: absolute;
    width: 400px;
    height: 500px;
    background-color: rgb(110, 218, 110);
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

.ball{
    position: relative;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: linear-gradient(to right, rgb(235, 110, 172),rgb(235, 35, 62));
    margin: auto;
    animation: bounce 1.3s infinite;
}

@keyframes bounce{
    0%{
        width: 70px;
        height: 70px;
    }
    30%{
        width: 60px;
        height: 70px;
    }
    50%{
        width: 77px;
        height: 50px;
        transform: translateY(452px);
        box-shadow: 20px 10px 10px black;
    }
    75%{
        width: 77px;
        height: 70px;
    }
    100%{
        transform: translateY(0px);
    }
}

Download CSS source file