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 In Up Big Animation Effect with CSS
The CSS fadeInUpBig animation effect creates a dramatic entrance where an element slides up from far below the viewport while fading in. This animation is perfect for hero sections, large images, or content that needs to make a bold visual impact.
Syntax
@keyframes fadeInUpBig {
0% {
opacity: 0;
transform: translateY(2000px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.element {
animation-name: fadeInUpBig;
animation-duration: duration;
}
How It Works
The animation combines two CSS properties −
- Opacity: Starts at 0 (invisible) and ends at 1 (fully visible)
- Transform: Moves the element from 2000px below its final position to its normal position
Example: Fade In Up Big Animation
The following example demonstrates the fadeInUpBig effect on a content box −
<!DOCTYPE html>
<html>
<head>
<style>
.animated {
animation-duration: 2s;
animation-fill-mode: both;
}
@keyframes fadeInUpBig {
0% {
opacity: 0;
transform: translateY(2000px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.fadeInUpBig {
animation-name: fadeInUpBig;
}
.content-box {
width: 300px;
height: 200px;
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-weight: bold;
border-radius: 10px;
margin: 50px auto;
text-align: center;
}
.demo-button {
display: block;
margin: 20px auto;
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="content-box animated fadeInUpBig">
Fade In Up Big!
</div>
<button class="demo-button" onclick="location.reload()">Replay Animation</button>
</body>
</html>
A colorful gradient box with "Fade In Up Big!" text slides up dramatically from below the page while fading in over 2 seconds. A blue button below allows replaying the animation.
Customization Options
| Property | Purpose | Example Values |
|---|---|---|
animation-duration |
Controls animation speed | 1s, 3s, 0.5s |
animation-delay |
Delays animation start | 0.5s, 1s, 2s |
animation-timing-function |
Controls easing | ease-out, ease-in-out, cubic-bezier() |
Conclusion
The fadeInUpBig animation creates an impressive entrance effect by combining opacity changes with large vertical movement. It's ideal for drawing attention to important content and creating engaging user experiences.
Updated on: 2026-03-15T11:33:51+05:30
272 Views
Advertisements