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
Fade In Animation Effect with CSS
CSS fade-in animation creates a smooth visual effect where elements gradually transition from transparent to opaque. This effect is commonly used to enhance user interaction by drawing attention to specific elements like buttons, images, or text when users hover over them.
Syntax
selector {
opacity: initial-value;
transition: opacity duration;
}
selector:hover {
opacity: final-value;
}
Key Properties
| Property | Description | Values |
|---|---|---|
opacity |
Controls transparency level | 0 (transparent) to 1 (opaque) |
transition |
Defines animation duration and timing | Time in seconds (s) or milliseconds (ms) |
Example 1: Image Fade-In Effect
The following example creates a fade-in animation for an image that becomes fully opaque on hover −
<!DOCTYPE html>
<html>
<head>
<style>
.fade-image {
opacity: 0.4;
transition: opacity 0.4s ease;
padding: 20px;
display: inline-block;
}
.fade-image:hover {
opacity: 1;
}
.fade-image img {
max-width: 200px;
height: auto;
}
</style>
</head>
<body>
<div class="fade-image">
<img src="/css/images/logo.png" alt="TutorialsPoint Logo">
</div>
</body>
</html>
An image appears with reduced opacity (40%). When you hover over it, the image smoothly transitions to full opacity, creating a brightening effect.
Example 2: Text Fade-In Animation
This example demonstrates a fade-in effect for text that starts completely hidden and appears on hover −
<!DOCTYPE html>
<html>
<head>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f0f8ff;
font-family: Arial, sans-serif;
margin: 0;
}
.fade-text {
opacity: 0;
transition: opacity 0.5s ease-in-out;
font-size: 3rem;
color: #2c3e50;
cursor: pointer;
text-align: center;
}
.fade-text:hover {
opacity: 1;
}
</style>
</head>
<body>
<h2 class="fade-text">Welcome to CSS!</h2>
</body>
</html>
The page appears empty initially. When you hover over the center area, the text "Welcome to CSS!" smoothly fades into view with a blue color.
Example 3: Button Fade-In Effect
This example shows how to apply fade-in animation to a button element for enhanced user interaction −
<!DOCTYPE html>
<html>
<head>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #ecf0f1;
margin: 0;
}
.fade-button {
opacity: 0.3;
transition: opacity 0.4s ease;
background-color: #3498db;
color: white;
border: none;
padding: 15px 30px;
font-size: 1.1rem;
border-radius: 5px;
cursor: pointer;
}
.fade-button:hover {
opacity: 1;
}
</style>
</head>
<body>
<button class="fade-button" type="button">Click to Submit</button>
</body>
</html>
A blue button appears with low opacity (30%). When you hover over the button, it smoothly transitions to full opacity, making it more prominent and visually appealing.
Conclusion
CSS fade-in animations using the opacity and transition properties create smooth visual effects that enhance user experience. This technique is perfect for highlighting interactive elements and creating professional-looking hover effects on websites.
623 Views
