EN
CSS - fade in effect
0
points
In this article, we would like to show you how to create fade in effect using CSS.
Quick solution:
.element {
animation: fadein 2s;
}
@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
Hints:
- we can change
fadeinanimation 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 fadein animation that goes from opacity: 0 to opacity: 1 making the element visible over specified time (2s).
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
.element {
-webkit-animation: fadein 2s; /* Safari, Chrome and Opera after 2012 (v.12.1) */
-moz-animation: fadein 2s; /* Firefox before 2012 (v.16) */
-ms-animation: fadein 2s; /* Internet Explorer */
-o-animation: fadein 2s; /* Opera before 2012 (v.12.1) */
animation: fadein 2s;
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Legacy keyframes */
/* Firefox before 2012 */
@-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera after 2012 (v.12.1) */
@-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Internet Explorer */
@-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Opera before 2012 (v.12.1) */
@-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
</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 {
animation: fadein 2s;
}
@keyframes fadein {
0% {
opacity: 0;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
</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.