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 Animation Effect with CSS
The CSS fade out animation effect gradually transitions an element from fully visible (opacity: 1) to completely invisible (opacity: 0). This creates a smooth disappearing effect that's commonly used for image galleries, modal closures, and interactive elements.
Syntax
@keyframes fadeOut {
0% { opacity: 1; }
100% { opacity: 0; }
}
.element {
animation-name: fadeOut;
animation-duration: time;
animation-fill-mode: both;
}
Example: Basic Fade Out Effect
The following example demonstrates a fade out animation on a colored box −
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
height: 100px;
background-color: #4CAF50;
color: white;
display: flex;
align-items: center;
justify-content: center;
margin: 20px;
border-radius: 8px;
}
@keyframes fadeOut {
0% { opacity: 1; }
100% { opacity: 0; }
}
.fade-out {
animation-name: fadeOut;
animation-duration: 3s;
animation-fill-mode: both;
}
</style>
</head>
<body>
<div class="box fade-out">Fading Out...</div>
<button onclick="location.reload()">Restart Animation</button>
</body>
</html>
A green box with white text "Fading Out..." gradually becomes transparent over 3 seconds until it completely disappears. A restart button allows you to replay the animation.
Example: Fade Out on Hover
You can also trigger the fade out effect on user interactions like hover −
<!DOCTYPE html>
<html>
<head>
<style>
.hover-box {
width: 150px;
height: 150px;
background-color: #ff6b6b;
margin: 20px;
border-radius: 50%;
transition: opacity 1s ease-in-out;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
}
.hover-box:hover {
opacity: 0;
}
</style>
</head>
<body>
<div class="hover-box">Hover Me</div>
<p>Hover over the circle to see the fade out effect.</p>
</body>
</html>
A red circular element with "Hover Me" text fades out smoothly when you hover over it and fades back in when you move the mouse away.
Key Properties
| Property | Description |
|---|---|
animation-duration |
Controls how long the fade out takes |
animation-fill-mode |
Determines the element's state before/after animation |
opacity |
Controls the transparency level (0 = invisible, 1 = fully visible) |
Conclusion
The fade out animation effect is created by animating the opacity property from 1 to 0. Use animation-fill-mode: both to maintain the final invisible state after the animation completes.
Updated on: 2026-03-15T11:34:09+05:30
547 Views
Advertisements