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
Fading Text Animation Effect Using CSS3
Fading is a visual representation of a gradual transition between two states of visibility. We can perform fading animation using the @keyframes rule and opacity property in CSS3.
In this article we are having two div boxes with some written content in the child div. Our task is to apply fading text animation effect using CSS3.
Types of Fading Animation
There are two types of fading animations which are listed below:
Fade-In Text Animation
Fade-in text animation makes a text appear gradually from trasnparent to completely visible. We will be using CSS animation and keyframes to apply fading-in text animation.
- We have used two divs where the parent div creates a deep blue rectangular area and child div will be having the fading animation effect.
- We have used parent class to create a rectangular area by setting it's dimension using CSS height and width property. We have also set the background-color of container and text color of written content in child element.
- We have used child class to design the child div where it's dimension is same as of parent div. We have used display property to make it flexbox and centered the written content horizontally and vertically using CSS justify-content and align-items property.
- We have set the opacity to 0, so no text will be displayed initially. Then we have used hover psuedo function to show fade-in animation upon hovering over box.
- We have used animation property to define an animation of name as fade having animation-duration of three seconds.
- We have used @keyframes which specifies opacity from 0 to 1 creating a fade-in animation.
Example
Here is an example implementing above mentioned steps to create a fade-in animation.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.parent {
height: 200px;
width: 200px;
background-color: #031926;
color: white;
}
.child {
height: inherit;
width: inherit;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
}
@keyframes fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.child:hover {
animation: fade 3s;
opacity: 1;
}
</style>
</head>
<body>
<h3>
Fading Text Animation Effect Using CSS3
</h3>
<p>
Hover over the box to see the <strong>
fade-in</strong> animation.
</p>
<div class="parent">
<div class="child">
This is a fading text.
</div>
</div>
</body>
</html>
Fade-Out Text Animation
Fade-out text animation makes a text gradually disappear from completely visible to trasnparent.
- To create a fade-out animation, all the properties used for parent and child div are same as approach first.
- We have just used "opacity:1" value at the begining of animation displaying the text content and then "opacity:0" hiding the text content, creating a fading out animation.
Example 1
Here is a complete example code implementing above mentioned steps to create a fading-out animation.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.parent {
height: 200px;
width: 200px;
background-color: #031926;
color: white;
}
.child {
height: inherit;
width: inherit;
display: flex;
justify-content: center;
align-items: center;
}
@keyframes fade {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.child:hover {
animation: fade 3s;
opacity: 0;
}
</style>
</head>
<body>
<h3>
Fading Text Animation Effect Using CSS3
</h3>
<p>
Hover over the box to see the <strong>
fade-out</strong> animation.
</p>
<div class="parent">
<div class="child">
This is a fading text.
</div>
</div>
</body>
</html>
Example 2
In this example, we have used both animation that is fading-in and fading-out. For 0%-50% of the time, it's displaying a fading-in animation and for the remaining time fading-out animation.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.parent {
height: 200px;
width: 200px;
background-color: #031926;
color: white;
}
.child {
height: inherit;
width: inherit;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
}
@keyframes fade {
0%,100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
.child:hover {
animation: fade 3s infinite;
}
</style>
</head>
<body>
<h3>
Fading Text Animation Effect Using CSS3
</h3>
<p>
Hover over the box to see both <strong>
fade-in</strong> and <strong> fade-out
</strong> animation.
</p>
<div class="parent">
<div class="child">
This is a fading text.
</div>
</div>
</body>
</html>
Conclusion
In this article, we disussed about fading text animation effect using CSS3. We have discussed about fade-in, fade-out animations. We have used CSS animation property along with @keyframes and opacity property.
4K+ Views
