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
Bounce Animation Effect with CSS
The CSS bounce animation effect creates a realistic bouncing motion by moving an element up and down with decreasing amplitude, simulating the physics of an object bouncing off a surface.
Syntax
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-30px); }
60% { transform: translateY(-15px); }
}
.element {
animation: bounce 1s ease-in-out;
}
How Bounce Animation Works
The bounce effect uses @keyframes to define multiple stages of movement. The element starts at its original position (0%), jumps up to maximum height at 40%, returns partially at 60%, and settles back to the original position. The decreasing jump heights create the bouncing effect.
Example: Basic Bounce Animation
The following example demonstrates a simple bounce animation applied to a colored box −
<!DOCTYPE html>
<html>
<head>
<style>
.bounce-box {
width: 100px;
height: 100px;
background-color: #3498db;
border-radius: 10px;
margin: 50px auto;
animation: bounce 2s infinite;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
60% {
transform: translateY(-15px);
}
}
</style>
</head>
<body>
<div class="bounce-box"></div>
<p style="text-align: center;">Watch the blue box bounce!</p>
</body>
</html>
A blue rounded box continuously bounces up and down with a realistic bouncing motion, starting with a big jump and gradually settling.
Example: Bounce on Hover
This example triggers the bounce animation when hovering over a button −
<!DOCTYPE html>
<html>
<head>
<style>
.bounce-button {
background-color: #e74c3c;
color: white;
padding: 15px 30px;
border: none;
border-radius: 25px;
font-size: 16px;
cursor: pointer;
margin: 50px;
transition: transform 0.2s;
}
.bounce-button:hover {
animation: bounce 0.6s ease-in-out;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-15px);
}
60% {
transform: translateY(-8px);
}
}
</style>
</head>
<body>
<button class="bounce-button">Hover me to bounce!</button>
</body>
</html>
A red button that triggers a quick bounce animation when you hover over it, creating an interactive bouncing effect.
Key Animation Properties
| Property | Purpose | Common Values |
|---|---|---|
animation-duration |
Controls bounce speed | 0.5s - 2s |
animation-iteration-count |
Number of bounces | 1, 3, infinite |
animation-timing-function |
Bounce easing | ease-in-out, ease-out |
Conclusion
CSS bounce animation creates engaging, physics-inspired motion effects using keyframes and transform properties. It's perfect for buttons, notifications, and attention-grabbing elements that need dynamic visual feedback.
373 Views
