Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- 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 this fading animation using the @keyframes rule and opacity property in CSS3.
The @keyframes rule can be used with the opacity property to control the fading CSS animation sequence by defining styles for keyframes. The style change will happen with the keywords “from” and “to”.
If we define opacity from 0 to 1; 0 is considered the beginning of the animation (blur) and 1 is the ending of the animation (completely visible).
If we define opacity from 1 to 0; it will be vice-versa of the above fading animation.
Example
In the following example, we are creating a fade-in effect for a text using the CSS @keyframes rule and animation properties −
Here, we used the @keyframes rule to define a keyframe animation (“fade-in”) which starts with 0 opacity and gradually transitions to 1 opacity. Then, we used the animation property on the text and set the duration to 3 seconds. Whenever we load the page, the text will gradually fade in over the duration of 3 seconds.
<!DOCTYPE html>
<html>
<head>
<title>Fading Text Animation Effect Using CSS3</title>
<style>
@keyframes fade-in {
from {
opacity: 0;
/* Start with 0 opacity */
}
to {
opacity: 1;
/* transition to full opacity */
}
}
h1 {
animation: fade-in 3s;
}
</style>
</head>
<body>
<h1 class="fade-in">Welcome to Tutorialspoint</h1>
</body>
</html>
Example
In the following example, we are creating a fade-in effect for a text using the CSS transition property.
Initially, the text’s opacity is set to 0, making it’s transparent. Then we used the transition property to animate the opacity change over a duration of 1 second, with an ease-in timing function.
Now, when we hover over the text, the text will make transition to 1 full opacity. In other words, the text will be visible.
<!DOCTYPE html>
<html>
<head>
<title>Fade-In Effect</title>
<style>
.fade-in {
opacity: 0;
/* Start with 0 opacity */
transition: opacity 1s ease-in;
}
.fade-in:hover {
opacity: 1;
/* On hover, transition to full opacity */
}
</style>
</head>
<body>
<h1 class="fade-in">Fade-In Effect</h1>
</body>
</html>
Example
In the following example, we are creating a fade-out effect for a text using the CSS @keyframes rule and animation properties −
<!DOCTYPE html>
<html>
<head>
<title>Fading Text Animation Effect Using CSS3</title>
<style>
@keyframes fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.fade-out {
animation: fade-out 3s;
}
</style>
</head>
<body>
<h1 class="fade-out">Welcome to Tutorialspoint</h1>
</body>
</html>
Example
In the following example, we are creating a fade-out effect for a text using the CSS transition property −
Initially, the text’s opacity is set to 1, making it fully visible. Then, we used the transition property to animate the opacity change over a duration of 1 second, with an ease-out timing function.
Now, when we hover over the text, the text will make transition to 0 opacity. In other words, the text will be fade out gradually.
<!DOCTYPE html>
<html>
<head>
<title>Fade-Out Effect</title>
<style>
.fade-out {
opacity: 1;
/* Start with full opacity */
transition: opacity 1s ease-out;
}
.fade-out:hover {
opacity: 0;
/* On hover, transition to 0 opacity */
}
</style>
</head>
<body>
<h1 class="fade-out">Welcome to Tutorialspoint</h1>
</body>
</html>
859 Views
