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
Fade Out Right Big Animation Effect with CSS
Animations never fail to attract people. When you present them with a painting and a video, they will always focus on the moving image since it is more visually appealing. The fade out right big animation creates a dramatic exit effect where elements fade away while sliding to the right with increased scale, adding visual impact to your web interfaces.
Syntax
@keyframes fadeOutRightBig {
from {
opacity: 1;
transform: translateX(0);
}
to {
opacity: 0;
transform: translateX(2000px);
}
}
.fade-out-right-big {
animation: fadeOutRightBig duration timing-function;
}
Example 1: Basic Fade Out Right Big Animation
The following example demonstrates the fade out right big effect with automatic animation −
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
font-family: verdana;
background-color: #EAFAF1;
padding: 50px;
}
@keyframes fadeOutRightBig {
from {
opacity: 1;
transform: translateX(0);
}
to {
opacity: 0;
transform: translateX(2000px);
}
}
.fade-out-right-big {
animation: fadeOutRightBig 2s ease-in;
color: #DE3163;
font-size: 36px;
}
</style>
</head>
<body>
<h1 class="fade-out-right-big">Welcome to Tutorialspoint</h1>
</body>
</html>
A large heading appears and then fades out while sliding dramatically to the right, disappearing completely after 2 seconds.
Example 2: Hover-Triggered Fade Out Right Big
The following example applies the fade out right big animation when the user hovers over the element −
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
font-family: verdana;
background-color: #F4ECF7;
padding: 100px;
}
@keyframes fadeOutRightBig {
from {
opacity: 1;
transform: translateX(0);
}
to {
opacity: 0;
transform: translateX(1500px);
}
}
.hover-fade {
color: #DE3163;
font-size: 32px;
cursor: pointer;
display: inline-block;
transition: transform 0.3s ease;
}
.hover-fade:hover {
animation: fadeOutRightBig 1.5s ease-in forwards;
}
</style>
</head>
<body>
<h1 class="hover-fade">Hover to Fade Out</h1>
<p>Move your mouse over the heading above</p>
</body>
</html>
A heading displays normally. When hovered, it fades out while sliding rapidly to the right and disappearing from view.
Key Properties
| Property | Purpose |
|---|---|
opacity |
Controls the fade effect from 1 (visible) to 0 (invisible) |
transform: translateX() |
Moves the element horizontally to the right |
animation-fill-mode: forwards |
Keeps the final state after animation completes |
Conclusion
The fade out right big animation combines opacity transitions with large horizontal movement to create a dramatic exit effect. Use forwards fill-mode to maintain the final invisible state, and adjust the translateX distance based on your layout needs.
200 Views
