Display a W with an effect of fade out - css

Question

I want to display a W with an effect of fade out when my W will be written entirely.
I do not know if I got tangled in my Keyframes
.anim {
transform: rotate(90deg);
}
#global {
width: 70px;
margin: auto;
zoom: 1.9;
margin-top: 100px;
position: relative;
cursor: pointer;
height: 60px;
}
.mask {
position: absolute;
border-radius: 2px;
overflow: hidden;
perspective: 1000;
backface-visibility: hidden;
}
.plane {
background: #2a6fed;
width: 400%;
height: 100%;
position: absolute;
transform: translate3d(0px, 0, 0);
/*transition: all 0.8s ease; */
z-index: 100;
perspective: 1000;
backface-visibility: hidden;
}
.animation {
transition: all 0.3s ease;
}
#top .plane {
z-index: 2000;
animation: trans3 3s ease-out infinite 0s backwards;
}
#middle .plane {
transform: translate3d(0px, 0, 0);
background: #2358be;
animation: trans2 3s ease-out infinite 1.5s backwards;
}
#middle-top .plane {
transform: translate3d(0px, 0, 0);
background: #2358be;
animation: trans25 3s ease-out infinite 2s backwards;
}
#bottom .plane {
z-index: 2000;
animation: trans1 3s ease-out infinite 2.6s backwards;
}
#top {
width: 53px;
height: 20px;
left: 40px;
transform: skew(15deg, 0);
z-index: 100;
top: -26px;
}
#middle-top {
width: 33px;
height: 20px;
left: 60px;
top: -10px;
transform: skew(15deg, -45deg);
}
#middle {
width: 33px;
height: 20px;
left: 60px;
top: 15px;
transform: skew(-15deg, 40deg);
}
#bottom {
width: 53px;
height: 20px;
left: 40px;
top: 30px;
transform: skew(-15deg, 0);
}
#loading-texte {
color: white;
position: absolute;
top: 70px;
font-family: Arial;
text-align: center;
font-size: 12px;
}
#keyframes trans1 {
from {
transform: translate3d(-250px, 0, 0);
}
to {
transform: translate3d(53px, 0, 0);
}
}
#keyframes trans2 {
from {
transform: translate3d(33px, 0, 0);
}
to {
transform: translate3d(-250px, 0, 0);
}
}
#keyframes trans25 {
from {
transform: translate3d(-250px, 0, 0);
}
to {
transform: translate3d(33px, 0, 0);
}
}
#keyframes trans3 {
from {
transform: translate3d(53px, 0, 0);
}
to {
transform: translate3d(-250px, 0, 0);
}
}
<section id="global">
<div class="anim">
<div id="top" class="mask">
<div class="plane"></div>
</div>
<div id="middle-top" class="mask">
<div class="plane"></div>
</div>
<div id="middle" class="mask">
<div class="plane"></div>
</div>
<div id="bottom" class="mask">
<div class="plane"></div>
</div>
</div>
<p id="loading-texte"><i>LOADING...</i></p>
</section>

Answer 1

#global {
width: 70px;
margin: auto;
margin-top: 100px;
position: relative;
cursor: pointer;
height: 60px;
}
.mask {
position: absolute;
border-radius: 2px;
overflow: hidden;
perspective: 1000;
backface-visibility: hidden;
}
.anim {
transform: rotate(90deg);
}
#top {
width: 53px;
height: 20px;
left: 40px;
transform: skew(15deg, 0);
z-index: 100;
top: -26px;
}
#middle-top {
width: 33px;
height: 20px;
left: 60px;
top: -10px;
transform: skew(15deg, -45deg);
}
#middle {
width: 33px;
height: 20px;
left: 60px;
top: 15px;
transform: skew(-15deg, 40deg);
}
#bottom {
width: 53px;
height: 20px;
left: 40px;
top: 30px;
transform: skew(-15deg, 0);
}
.plane {
background: #2a6fed;
width: 100%;
height: 100%;
position: absolute;
z-index: 100;
perspective: 1000;
backface-visibility: hidden;
animation-direction: alternate;
animation-duration: 4s;
animation-iteration-count: infinite;
}
#bottom .plane {
z-index: 2000;
animation-name: trans1;
}
#middle .plane {
transform: translate3d(0, 0, 0);
background: #2358be;
animation-name: trans2;
}
#middle-top .plane {
transform: translate3d(0, 0, 0);
background: #2358be;
animation-name: trans3;
}
#top .plane {
transform: translate3d(0, 0, 0);
z-index: 2000;
animation-name: trans4;
}
#keyframes trans1 {
0% {
transform: translate3d(-100%, 0, 0);
}
25% {
transform: translate3d(0%, 0, 0);
}
100% {
transform: translate3d(0%, 0, 0);
}
}
#keyframes trans2 {
0% {
transform: translate3d(100%, 0, 0);
}
25% {
transform: translate3d(100%, 0, 0);
}
50% {
transform: translate3d(0%, 0, 0);
}
100% {
transform: translate3d(0%, 0, 0);
}
}
#keyframes trans3 {
0% {
transform: translate3d(-100%, 0, 0);
}
50% {
transform: translate3d(-100%, 0, 0);
}
75% {
transform: translate3d(0%, 0, 0);
}
100% {
transform: translate3d(0%, 0, 0);
}
}
#keyframes trans4 {
0% {
transform: translate3d(100%, 0, 0);
}
75% {
transform: translate3d(100%, 0, 0);
}
100% {
transform: translate3d(0%, 0, 0);
}
}
#loading-texte {
color: white;
position: absolute;
top: 70px;
font-family: Arial;
text-align: center;
font-size: 12px;
}
<section id="global">
<div class="anim">
<div id="top" class="mask">
<div class="plane"></div>
</div>
<div id="middle-top" class="mask">
<div class="plane"></div>
</div>
<div id="middle" class="mask">
<div class="plane"></div>
</div>
<div id="bottom" class="mask">
<div class="plane"></div>
</div>
</div>
<p id="loading-texte"><i>LOADING...</i></p>
</section>