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 Right Animation Effect with CSS
The CSS Bounce In Right animation effect creates an element that slides in from the right side of the screen with a bouncing motion. This animation starts with the element positioned far to the right and invisible, then bounces it into its final position.
Syntax
.element {
animation-name: bounceInRight;
animation-duration: duration;
animation-fill-mode: both;
}
@keyframes bounceInRight {
0% {
opacity: 0;
transform: translateX(2000px);
}
60% {
opacity: 1;
transform: translateX(-30px);
}
80% {
transform: translateX(10px);
}
100% {
transform: translateX(0);
}
}
Example
The following example demonstrates the bounce in right animation effect −
<!DOCTYPE html>
<html>
<head>
<style>
.animated-box {
width: 200px;
height: 100px;
background-color: #4CAF50;
border-radius: 10px;
margin: 50px auto;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-family: Arial, sans-serif;
animation-duration: 2s;
animation-fill-mode: both;
animation-name: bounceInRight;
}
@keyframes bounceInRight {
0% {
opacity: 0;
transform: translateX(2000px);
}
60% {
opacity: 1;
transform: translateX(-30px);
}
80% {
transform: translateX(10px);
}
100% {
transform: translateX(0);
}
}
.trigger-btn {
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-box">
Bounce In Right
</div>
<button class="trigger-btn" onclick="location.reload()">Replay Animation</button>
</body>
</html>
A green box with "Bounce In Right" text slides in from the right side of the screen with a bouncing effect, overshooting slightly before settling into its final position. A blue button allows replaying the animation.
Key Animation Points
| Keyframe | Transform | Opacity | Effect |
|---|---|---|---|
| 0% | translateX(2000px) | 0 | Element starts far right and invisible |
| 60% | translateX(-30px) | 1 | Element becomes visible and overshoots left |
| 80% | translateX(10px) | 1 | Element bounces back slightly to the right |
| 100% | translateX(0) | 1 | Element settles in final position |
Conclusion
The bounce in right animation creates an engaging entrance effect by combining horizontal translation with opacity changes. The bouncing motion is achieved through strategic keyframe positioning that overshoots and corrects the final position.
Updated on: 2026-03-15T11:45:43+05:30
225 Views
Advertisements