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
Fade Out Right Big Animation Effect with CSS
Animations never fail to attract people in. When you present them with a painting and a video, they will always focus on the moving image since it is more visually appealing. Thus, the best method to get people to visit your website is to incorporate animations. The things you can accomplish using CSS animations are endless. A few lines of code can be used to generate stunning and interesting animations. All you need to do is adjust the direction and give a few parameters.
For getting better understanding on implemeneting the fade out right big animation effect with CSS let's look at the following examples
Example
Let's look at the following example, where we are going to use the fade out animation
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
font-family: verdana;
color: #DE3163;
background-color: #EAFAF1;
}
@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>
When we run the above code, it will generate an output consisting of the text, which will fade out after some time of being displayed on the webpage.
Example
Considering another scenario, where we are going to apply the fade out animation when the user user hovers over it.
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
font-family: verdana;
font-size: 11px;
margin: 110px;
background-color: #F4ECF7;
color: #DE3163;
}
.fade-out {
opacity: 1;
transition: opacity 1s ease-out;
}
.fade-out:hover {
opacity: 0;
}
</style>
</head>
<body>
<h1 class="fade-out">TUTORIALSPOINT</h1>
</body>
</html>
On running the above code, the output window will pop up, displaying the text that fades out when the user hovers over the text on the webpage.
96 Views
To Continue Learning Please Login