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 Out Right Animation Effect with CSS
The CSS Bounce Out Right animation effect creates a bouncing motion where an element slides to the right while fading out. The animation starts with a slight leftward movement before bouncing out to the right side of the screen.
Syntax
@keyframes bounceOutRight {
0% { transform: translateX(0); }
20% { opacity: 1; transform: translateX(-20px); }
100% { opacity: 0; transform: translateX(2000px); }
}
.element {
animation: bounceOutRight duration timing-function;
}
Example
The following example demonstrates the bounce out right animation effect −
<!DOCTYPE html>
<html>
<head>
<style>
.animated-box {
width: 100px;
height: 100px;
background-color: #3498db;
margin: 50px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
animation: bounceOutRight 2s ease-in-out;
}
@keyframes bounceOutRight {
0% {
transform: translateX(0);
opacity: 1;
}
20% {
opacity: 1;
transform: translateX(-20px);
}
100% {
opacity: 0;
transform: translateX(2000px);
}
}
.container {
overflow: hidden;
height: 200px;
border: 2px dashed #ccc;
position: relative;
}
</style>
</head>
<body>
<div class="container">
<div class="animated-box">Box</div>
</div>
<button onclick="location.reload()">Replay Animation</button>
</body>
</html>
A blue box appears and performs the bounce out right animation: it briefly moves left (-20px), then bounces out to the right (2000px) while fading out completely. A dashed container shows the animation boundary, and a replay button allows you to restart the effect.
Key Points
- The animation has three keyframes: 0% (start), 20% (bounce), and 100% (end)
- At 20%, the element moves slightly left (-20px) to create the bounce effect
- The element fades out using opacity while moving far right (2000px)
- Use
overflow: hiddenon the container to prevent scrollbars
Conclusion
The bounce out right animation creates an engaging exit effect by combining translation and opacity changes. The initial leftward movement followed by the rightward bounce creates a natural, elastic motion perfect for removing elements from view.
Updated on: 2026-03-15T11:46:27+05:30
98 Views
Advertisements