Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to Build a Bounce Ball with HTML, CSS, and JavaScript?
Creating animated bouncing balls is a popular technique to make web pages more visually appealing. While HTML provides the structure, CSS keyframes and JavaScript offer different approaches to create smooth bouncing animations. CSS keyframes provide declarative animations, while JavaScript offers programmatic control for more complex interactions.
This article will demonstrate how to build bouncing ball effects using both CSS keyframes and JavaScript animations.
Syntax
@keyframes animation-name {
0% { transform: translateY(start-position); }
50% { transform: translateY(middle-position); }
100% { transform: translateY(end-position); }
}
selector {
animation: animation-name duration timing-function iteration;
}
Method 1: Using CSS Keyframes
CSS keyframes provide a declarative way to create bouncing animations. The following example creates a single bouncing ball
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
background-color: #f0f0f0;
}
.ball {
width: 50px;
height: 50px;
background-color: #3498db;
border-radius: 50%;
animation: bounce 1s ease-in-out infinite;
}
@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-100px);
}
}
</style>
</head>
<body>
<div class="container">
<div class="ball"></div>
</div>
</body>
</html>
A blue circular ball continuously bounces up and down within a gray container, moving 100px upward at the peak of each bounce cycle.
Method 2: Multiple Bouncing Balls
You can create multiple balls with staggered animations for a more dynamic effect
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
background-color: #2c3e50;
gap: 20px;
}
.ball {
width: 40px;
height: 40px;
background-color: #e74c3c;
border-radius: 50%;
animation: bounce 1.2s ease-in-out infinite;
}
.ball:nth-child(2) {
animation-delay: 0.2s;
background-color: #f39c12;
}
.ball:nth-child(3) {
animation-delay: 0.4s;
background-color: #2ecc71;
}
@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-80px);
}
}
</style>
</head>
<body>
<div class="container">
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
</div>
</body>
</html>
Three colored balls (red, orange, green) bounce in sequence with staggered timing, creating a wave-like bouncing effect against a dark background.
Method 3: JavaScript-Controlled Animation
JavaScript provides programmatic control over animations, allowing for more complex bouncing logic
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 400px;
height: 300px;
background-color: #ecf0f1;
border: 2px solid #34495e;
margin: 20px auto;
}
.ball {
position: absolute;
width: 50px;
height: 50px;
background-color: #9b59b6;
border-radius: 50%;
left: 175px;
}
</style>
</head>
<body>
<div class="container">
<div class="ball" id="jsBall"></div>
</div>
<script>
const ball = document.getElementById('jsBall');
let y = 0;
let direction = 1;
const speed = 3;
const maxHeight = 250;
function animateBall() {
y += speed * direction;
if (y >= maxHeight) {
direction = -1;
} else if (y <= 0) {
direction = 1;
}
ball.style.top = y + 'px';
requestAnimationFrame(animateBall);
}
animateBall();
</script>
</body>
</html>
A purple ball smoothly bounces up and down within a bordered container, with JavaScript controlling the precise movement and direction changes.
Key Differences
| Method | Advantages | Best For |
|---|---|---|
| CSS Keyframes | Smooth, GPU-accelerated, declarative | Simple, consistent animations |
| JavaScript | Dynamic control, interactive, conditional logic | Complex animations, user interaction |
Conclusion
Both CSS keyframes and JavaScript offer effective ways to create bouncing ball animations. CSS keyframes are ideal for simple, consistent bouncing effects, while JavaScript provides greater control for interactive or complex animations.
3K+ Views
