Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Fade-In Animation Effect with CSS
We are aware that CSS offers a developer an excess of features. Some can only be attained by adjusting already-existing features, while others can be accomplished directly. For example, different animations can be applied to different website elements. One of these is fade-in animation.
When hovering over an object in a fade-in animation, it appears to get darker. There exist numerous methods to accomplish this outcome. To draw attention to a certain button or image, we use this technique. We may achieve this by adjusting the element's opacity.
Example
Let's look at the following example, where we are going to create a fade in animation for the image.
<!DOCTYPE html>
<html>
<head>
<style>
div {
padding: 50px;
margin: 50px;
}
.tp {
opacity: 40%;
transition: opacity 0.4s;
}
.tp:hover {
opacity: 100%;
transition: opacity 0.4s;
}
</style>
</head>
<body style="background-color:#F4ECF7">
<div class="tp">
<img src="https://www.tutorialspoint.com/cg/images/logo.png"></img>
</div>
</body>
</html>
When we run the above code, it will generate an output consisting of the image with a low opacity. When the user tries to hover over it, it displays brighter on the webpage.
Example
Considering another scenario, where we are going to create a fade in animation for text.
<!DOCTYPE html>
<html>
<head>
<style>
body {
display: flex;
justify-content: center;
font-family: verdana;
align-items: center;
color: #DE3163;
background-color: #EAFAF1;
}
h2 {
font-size: 100px;
}
.tp {
margin: 60px;
padding: 20px;
}
.x {
opacity: 0;
cursor: pointer;
transition: 0.35s;
}
.x:hover {
opacity: 1;
}
</style>
</head>
<body>
<div class="tp">
<h2 class="x">Welcome</h2>
</div>
</body>
</html>
On running the above code, the output window will pop up, and when the user tries to hover over the screen, it will display text on the webpage.
Example
In the following example, we are going to create the fade in animation for the button.
<!DOCTYPE html>
<html>
<head>
<style>
div {
padding: 100px;
margin: 100px;
}
.tp {
opacity: 30%;
transition: opacity 0.4s
}
.tp:hover {
opacity: 100%;
transition: opacity 0.4s
}
</style>
</head>
<body style="background-color:#E8DAEF">
<div class="tp">
<button type="button">Click To Submit</button>
</div>
</body>
</html>
On running the above code, it will generate an output consisting of the button with low opacity. Later, when the user hovers over it, it will display brighter on the webpage.
499 Views
