EN
CSS - fade out effect
3
points
In this article, we would like to show you how to create fade out effect using CSS.
Quick solution:
.element {
opacity: 0; /* final animation state */
animation: fadeout 3s;
}
@keyframes fadeout {
from {
opacity: 1; /* beginning animation state */
}
to {
opacity: 0; /* final animation state */
}
}
Hints:
- we can change
fadeoutanimation name to our own,- we can use many different
@keyframesin styles simultaneously.
Practical example
In this example, we present how to use @keyframes to create fadeout animation that goes from opacity: 1 to opacity: 0 making the element invisible over specified time (3s).
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
.element {
opacity: 0;
-webkit-animation: fadeout 3s; /* Safari, Chrome and Opera after 2012 (v.12.1) */
-moz-animation: fadeout 3s; /* Firefox before 2012 (v.16) */
-ms-animation: fadeout 3s; /* Internet Explorer */
-o-animation: fadeout 3s; /* Opera before 2012 (v.12.1) */
animation: fadeout 3s;
}
@-moz-keyframes fadeout { /* Firefox before 2012 */
from { opacity: 1; }
to { opacity: 0; }
}
@-webkit-keyframes fadeout { /* Safari, Chrome and Opera after 2012 (v.12.1) */
from { opacity: 1; }
to { opacity: 0; }
}
@-ms-keyframes fadeout { /* Internet Explorer */
from { opacity: 1; }
to { opacity: 0; }
}
@-o-keyframes fadeout { /* Opera before 2012 (v.12.1) */
from { opacity: 1; }
to { opacity: 0; }
}
@keyframes fadeout {
from { opacity: 1; }
to { opacity: 0; }
}
</style>
</head>
<body>
<div class="element">
<div>some text...</div>
<div>some text...</div>
<div>some text...</div>
</div>
</body>
</html>
Keyframes with percentage value
You can also divide @keyframes animations into more parts using percentage values instead of from and to keywords.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
.element {
opacity: 0;
/* Hint: you can put animation legacy properties here */
animation: fadeout 2s;
}
/* Hint: you can put legacy keyframes here */
@keyframes fadeout {
0% {
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
opacity: 0;
}
}
</style>
</head>
<body>
<div class="element">
<div>some text...</div>
<div>some text...</div>
<div>some text...</div>
</div>
</body>
</html>
Note: you can put much more middle states between
0%and100%inside@keyframes.