css - 显示带有淡出效果的 W

Question

当我的W被完全写入时，我想显示一个带有淡出效果的W。 我不知道我是否纠结于我的关键帧

    .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>