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
Fade Out Left Big Animation Effect with CSS
The CSS Fade Out Left Big animation effect creates a dramatic exit animation where an element gradually fades out while sliding far to the left (-2000px). This effect combines opacity and transform properties to create a smooth disappearing animation.
Syntax
@keyframes fadeOutLeftBig {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(-2000px);
}
}
.element {
animation-name: fadeOutLeftBig;
animation-duration: 1s;
}
Example
The following example demonstrates the Fade Out Left Big animation effect −
<!DOCTYPE html>
<html>
<head>
<style>
.animated-box {
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: 3s;
animation-fill-mode: both;
}
@keyframes fadeOutLeftBig {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(-2000px);
}
}
.fadeOutLeftBig {
animation-name: fadeOutLeftBig;
}
</style>
</head>
<body>
<div class="animated-box fadeOutLeftBig">Fade Out Left Big</div>
<button onclick="location.reload()">Reload Animation</button>
</body>
</html>
A green box with white text starts visible in the center, then gradually fades out while sliding dramatically to the left until it completely disappears off-screen. The animation takes 3 seconds to complete.
Key Properties
| Property | Value | Purpose |
|---|---|---|
opacity |
1 ? 0 | Controls the fade effect |
transform: translateX() |
0 ? -2000px | Moves element far to the left |
animation-fill-mode |
both | Maintains final state after animation |
Conclusion
The Fade Out Left Big animation is perfect for dramatic exit effects. The large translation distance (-2000px) ensures the element moves completely off-screen, while the opacity change creates a smooth fade effect.
Updated on: 2026-03-15T11:42:01+05:30
110 Views
Advertisements