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 Down Big Animation Effect with CSS
The CSS Fade Down Big animation effect creates a dramatic exit animation where an element fades out while moving downward by a large distance. This animation is commonly used for dramatic page transitions or removing elements from view.
Syntax
@keyframes fadeOutDownBig {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(2000px);
}
}
.fadeOutDownBig {
animation-name: fadeOutDownBig;
animation-duration: 1s;
animation-fill-mode: both;
}
Example
The following example demonstrates the Fade Down Big animation effect applied to a box element −
<!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: 8px;
animation-duration: 3s;
animation-fill-mode: both;
}
@keyframes fadeOutDownBig {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(2000px);
}
}
.fadeOutDownBig {
animation-name: fadeOutDownBig;
}
</style>
</head>
<body>
<div class="animated-box fadeOutDownBig">Fade Down Big</div>
<button onclick="location.reload()">Replay Animation</button>
</body>
</html>
A green box with white text "Fade Down Big" appears and then gradually fades out while moving down 2000px over 3 seconds, creating a dramatic exit effect.
Key Properties
| Property | Description |
|---|---|
opacity |
Controls the transparency from 1 (visible) to 0 (invisible) |
transform: translateY() |
Moves the element vertically by the specified distance |
animation-duration |
Controls how long the animation takes to complete |
animation-fill-mode: both |
Maintains the final state after animation completes |
Conclusion
The Fade Down Big animation effect combines opacity transition with large vertical movement to create a dramatic exit animation. It's perfect for removing elements with visual impact or creating engaging page transitions.
Updated on: 2026-03-15T11:46:42+05:30
146 Views
Advertisements