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
Selected Reading
Bounce In Left Animation Effect with CSS
The CSS Bounce In Left animation effect creates an element that enters from the left side of the screen with a bouncing motion. This animation starts with the element positioned off-screen to the left, then slides in with a characteristic bounce effect.
Syntax
@keyframes bounceInLeft {
0% {
opacity: 0;
transform: translateX(-2000px);
}
60% {
opacity: 1;
transform: translateX(30px);
}
80% {
transform: translateX(-10px);
}
100% {
transform: translateX(0);
}
}
.element {
animation-name: bounceInLeft;
animation-duration: 1s;
}
Example
The following example demonstrates the bounce in left animation effect −
<!DOCTYPE html>
<html>
<head>
<style>
.animated {
width: 200px;
height: 100px;
background-color: #4CAF50;
color: white;
display: flex;
align-items: center;
justify-content: center;
margin: 50px auto;
border-radius: 10px;
animation-duration: 2s;
animation-fill-mode: both;
}
@keyframes bounceInLeft {
0% {
opacity: 0;
transform: translateX(-2000px);
}
60% {
opacity: 1;
transform: translateX(30px);
}
80% {
transform: translateX(-10px);
}
100% {
transform: translateX(0);
}
}
.bounceInLeft {
animation-name: bounceInLeft;
}
.demo-button {
display: block;
margin: 20px auto;
padding: 10px 20px;
background-color: #2196F3;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="animated bounceInLeft">Bounce In Left</div>
<button class="demo-button" onclick="location.reload()">Replay Animation</button>
</body>
</html>
A green rectangular box with "Bounce In Left" text slides in from the left side of the screen with a bouncing effect. The animation starts off-screen, quickly moves to the right past its final position, then bounces back slightly to the left before settling in the center. A blue "Replay Animation" button appears below to restart the effect.
Key Animation Properties
| Keyframe | Opacity | Transform | Effect |
|---|---|---|---|
| 0% | 0 | translateX(-2000px) | Hidden, positioned far left |
| 60% | 1 | translateX(30px) | Visible, overshoots to the right |
| 80% | 1 | translateX(-10px) | Bounces back slightly left |
| 100% | 1 | translateX(0) | Settles in final position |
Conclusion
The Bounce In Left animation creates an engaging entrance effect where elements slide in from the left with a realistic bouncing motion. It's perfect for drawing attention to important content or creating dynamic page transitions.
Updated on: 2026-03-15T11:45:10+05:30
168 Views
Advertisements