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:
xxxxxxxxxx1
.element {2
opacity: 0; /* final animation state */3
animation: fadeout 3s;4
}5
6
@keyframes fadeout {7
from {8
opacity: 1; /* beginning animation state */9
}10
to {11
opacity: 0; /* final animation state */12
}13
}Hints:
- we can change
fadeoutanimation name to our own,- we can use many different
@keyframesin styles simultaneously.
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).
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
.element {7
opacity: 0;8
animation: fadeout 3s; /* Safari, Chrome and Opera after 2012 (v.12.1) */9
animation: fadeout 3s; /* Firefox before 2012 (v.16) */10
animation: fadeout 3s; /* Internet Explorer */11
animation: fadeout 3s; /* Opera before 2012 (v.12.1) */12
animation: fadeout 3s;13
}14
15
@-moz-keyframes fadeout { /* Firefox before 2012 */16
from { opacity: 1; }17
to { opacity: 0; }18
}19
20
@-webkit-keyframes fadeout { /* Safari, Chrome and Opera after 2012 (v.12.1) */21
from { opacity: 1; }22
to { opacity: 0; }23
}24
25
@-ms-keyframes fadeout { /* Internet Explorer */26
from { opacity: 1; }27
to { opacity: 0; }28
}29
30
@-o-keyframes fadeout { /* Opera before 2012 (v.12.1) */31
from { opacity: 1; }32
to { opacity: 0; }33
}34
35
@keyframes fadeout {36
from { opacity: 1; }37
to { opacity: 0; }38
}39
40
</style>41
</head>42
<body>43
<div class="element">44
<div>some text...</div>45
<div>some text...</div>46
<div>some text...</div>47
</div>48
</body>49
</html>You can also divide @keyframes animations into more parts using percentage values instead of from and to keywords.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
.element {7
opacity: 0;8
/* Hint: you can put animation legacy properties here */9
animation: fadeout 2s;10
}11
12
/* Hint: you can put legacy keyframes here */13
14
@keyframes fadeout {15
0% {16
opacity: 1;17
}18
50% {19
opacity: 0.5;20
}21
100% {22
opacity: 0;23
}24
}25
26
</style>27
</head>28
<body>29
<div class="element">30
<div>some text...</div>31
<div>some text...</div>32
<div>some text...</div>33
</div>34
</body>35
</html>Note: you can put much more middle states between
0%and100%inside@keyframes.
