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 Animation Effect with CSS
The CSS fade in up animation effect creates a smooth transition where an element starts invisible and positioned below its final location, then gradually appears while moving upward to its intended position. This creates an elegant entrance animation commonly used in modern web design.
Syntax
@keyframes fadeInUp {
0% {
opacity: 0;
transform: translate3d(0, 100%, 0);
}
100% {
opacity: 1;
transform: none;
}
}
.element {
animation-name: fadeInUp;
animation-duration: duration;
animation-fill-mode: both;
}
Example: Basic Fade In Up Animation
The following example demonstrates a fade in up effect applied to a colored box −
<!DOCTYPE html>
<html>
<head>
<style>
.animated {
width: 200px;
height: 100px;
background-color: #3498db;
margin: 50px auto;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-family: Arial, sans-serif;
font-weight: bold;
animation-duration: 2s;
animation-fill-mode: both;
}
@keyframes fadeInUp {
0% {
opacity: 0;
transform: translate3d(0, 100%, 0);
}
100% {
opacity: 1;
transform: none;
}
}
.fadeInUp {
animation-name: fadeInUp;
}
.reload-btn {
display: block;
margin: 20px auto;
padding: 10px 20px;
background-color: #2c3e50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="animated fadeInUp">Fade In Up</div>
<button class="reload-btn" onclick="location.reload()">Replay Animation</button>
</body>
</html>
A blue box with white text "Fade In Up" appears on the page, starting from below and fading in while moving upward over 2 seconds. A "Replay Animation" button allows you to restart the effect.
Key Properties
| Property | Description |
|---|---|
opacity |
Controls visibility (0 = invisible, 1 = fully visible) |
transform: translate3d(0, 100%, 0) |
Moves element 100% down from its normal position |
animation-duration |
Controls how long the animation takes to complete |
animation-fill-mode: both |
Applies styles from both 0% and 100% keyframes |
Conclusion
The fade in up animation combines opacity and transform properties to create a smooth entrance effect. It's perfect for drawing attention to important content and creating engaging user experiences on websites.
Updated on: 2026-03-15T11:31:01+05:30
741 Views
Advertisements