Today I am going to write this tutorial to how you can give a fade-in and fade-out effect to any text using CSS 3 Animation. Its a very simple and easy to understand, basically I am using keyframe ( using @keyframes rule, you can create animations ). I have created a 7 characters fade-in and fade-out one by one and you can use this effect for your loading effect to show that some thing happening on backend.
Let see on our HTML and CSS
|
1
2
3
4
5
6
7
|
<span class=‘letter’>L</span>
<span class=‘letter’>O</span>
<span class=‘letter’>A</span>
<span class=‘letter’>D</span>
<span class=‘letter’>I</span>
<span class=‘letter’>N</span>
<span class=‘letter’>G</span>
|
Above HTML create 7 characters LOADING this will fade-in and fade-out.
CSS
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
|
<style>
body, html {
text-align: center;
font-size: 90px;
font-family: Poiret One;
height: 100%;
background: -webkit-linear-gradient(315deg, #723362, #9d223c);
background: linear-gradient(135deg, #723362, #9d223c);
overflow: hidden;
color: white;
}
.letter {
position: relative;
top: -webkit-calc(50% – 60px);
top: calc(50% – 60px);
text-shadow: 0px 0px 3px white;
}
.letter:nth-child(1) {
-webkit-animation: fade 4s infinite 200ms;
animation: fade 4s infinite 200ms;
}
.letter:nth-child(2) {
-webkit-animation: fade 4s infinite 400ms;
animation: fade 4s infinite 400ms;
}
.letter:nth-child(3) {
-webkit-animation: fade 4s infinite 600ms;
animation: fade 4s infinite 600ms;
}
.letter:nth-child(4) {
-webkit-animation: fade 4s infinite 800ms;
animation: fade 4s infinite 800ms;
}
.letter:nth-child(5) {
-webkit-animation: fade 4s infinite 1000ms;
animation: fade 4s infinite 1000ms;
}
.letter:nth-child(6) {
-webkit-animation: fade 4s infinite 1200ms;
animation: fade 4s infinite 1200ms;
}
.letter:nth-child(7) {
-webkit-animation: fade 4s infinite 1400ms;
animation: fade 4s infinite 1400ms;
}
@-webkit-keyframes fade {
50% {
opacity: 0.02;
}
}
@keyframes fade {
50% {
opacity: 0.02;
}
}
</style>
|
Above CSS uses to fade-in fade-out each character and change opacity to 0.2; in keyframe fade, .letter:nth-child(1) points to first character and all above nth-child points to each character. This effect takes 4 seconds to complete.
That’s All for today’s tutorial I hope you like it please feel free to comment your suggestions and feedback