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
Perform Animation on CSS opacity
The CSS opacity property controls the transparency of an element. When combined with CSS animations, you can create smooth fade-in and fade-out effects that enhance user experience on web pages.
Syntax
@keyframes animation-name {
from { opacity: start-value; }
to { opacity: end-value; }
}
selector {
animation: animation-name duration timing-function iteration-count;
}
Possible Values
| Value | Description |
|---|---|
0 |
Completely transparent (invisible) |
0.5 |
50% transparent |
1 |
Completely opaque (fully visible) |
Example: Fade Animation
The following example demonstrates opacity animation with multiple overlapping elements −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
height: 300px;
margin: 20px;
}
#demo1 {
position: absolute;
top: 60px;
width: 300px;
height: 150px;
background-color: lightblue;
animation: fadeAnimation 4s infinite;
display: flex;
align-items: center;
justify-content: center;
}
#demo2 {
position: absolute;
top: 90px;
left: 30px;
width: 300px;
height: 150px;
background-color: orange;
animation: fadeAnimation 3s infinite;
}
#demo3 {
position: absolute;
top: 120px;
left: 60px;
width: 350px;
height: 150px;
background-color: coral;
display: flex;
align-items: center;
justify-content: center;
}
@keyframes fadeAnimation {
0% { opacity: 1; }
30% { opacity: 0.4; }
100% { opacity: 1; }
}
h1 {
margin: 0;
font-size: 18px;
color: white;
}
</style>
</head>
<body>
<p>Opacity Animation Example</p>
<div class="container">
<div id="demo1"><h1>Animated Element 1</h1></div>
<div id="demo2"></div>
<div id="demo3"><h1>Static Element</h1></div>
</div>
</body>
</html>
Three overlapping colored rectangles appear on the page. The blue and orange rectangles continuously fade from full opacity to 40% transparency and back, while the coral rectangle remains static. The blue rectangle completes its fade cycle in 4 seconds, and the orange rectangle in 3 seconds, creating a layered animation effect.
Simple Fade-In Example
Here's a simpler example showing a basic fade-in effect −
<!DOCTYPE html>
<html>
<head>
<style>
.fade-in {
width: 200px;
height: 100px;
background-color: #4CAF50;
color: white;
display: flex;
align-items: center;
justify-content: center;
margin: 20px auto;
animation: fadeIn 2s ease-in;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
</head>
<body>
<div class="fade-in">Fade In Effect</div>
</body>
</html>
A green box with white text "Fade In Effect" gradually appears on the page over 2 seconds, transitioning from completely transparent to fully visible.
Conclusion
CSS opacity animations provide an elegant way to create fade effects. Use keyframes to define opacity changes over time, and combine with other properties for more complex animations.
Updated on: 2026-03-15T13:32:45+05:30
249 Views
Advertisements