how to create design Letter z with animation in css-CodePudding

I want to create the letter z in animation. In such a way that the first part (1) appears without delay with animation from left to right. When the first part (1) reaches the right, the second part (2) will appear from top to bottom with animation. When the second part (2) is down, the third part (3) will appear from left to right with animation. The problem with this animation is that all three parts (1-2-3) appear together, while I want them to appear alternately and late. Thank you in advance for your cooperation.

#global{
    width:200px;
    position:relative;
    cursor:pointer;
    height:200px;
    background-color: black;
    padding: 1rem;
}

.mask{
    position:absolute;
    border-radius:2px;
    overflow:hidden;
    perspective: 1000;
    backface-visibility: hidden;
}

.plane{
    background:#ffffff;
    width:400%;
    height:100%;
    position:absolute;
    transform : translate3d(0px,0,0);
    z-index:100;
    perspective: 1000;
    backface-visibility: hidden;
    
}

#top .plane{
    z-index:2000;
    animation: trans1 1s ease-in infinite  0s forwards;
    -webkit-animation: trans1 1s ease-in infinite  0s forwards;
}

#middle .plane{
    transform: translate3d(0px,0,0);
    background: #bbbbbb;
    animation: trans2 1s linear infinite  2s  forwards;
    -webkit-animation: trans2 1s linear infinite  2s  forwards;
}

#bottom .plane{
    z-index:2000;
    animation: trans3 2s ease-out infinite  4s forwards;
    -webkit-animation: trans3 2s ease-out infinite  4s forwards;
}
  
#top{
    width:200px;
    height:15px;
    left:0;
    z-index:100;
    transform: skew(-15deg, 0);
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}

#middle{
    width:187px;
    height:25px;
    left:6px;
    top:78px;
    transform:skew(-15deg, -40deg);
    -webkit-transform:skew(-15deg, -40deg);
    -moz-transform:skew(-15deg, -40deg);
    -ms-transform:skew(-15deg, -40deg);
    -o-transform:skew(-15deg, -40deg);
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}

#bottom{
    width:200px;
    height:15px;
    top:159px;
    transform: skew(-15deg, 0);
    -webkit-transform: skew(-15deg, 0);
    -moz-transform: skew(-15deg, 0);
    -ms-transform: skew(-15deg, 0);
    -o-transform: skew(-15deg, 0);
    border-radius: 20px;
}
  
@keyframes trans1{ 
    0% {
        width: 0%;
        left: 0;
    }
    100% {
        width: 100%;
        left: 0;
    }
}

@keyframes trans2{ 
    0% {
        width: 0%;
        left: 100%;
    }
    100% {
        width: 100%;
        left: 0;
    }
}

@keyframes trans3{ 
    0% {
        width: 0%;
        left: 0;
    }
    100% {
        width: 100%;
        left: 0;
    }
}

<div id="global">
      <div id="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>

CodePudding user response：

This snippet thinks of things slightly differently.

Each line has a 3 second animation with the top one animating to its full width in the first second, ie the first 33.33% of the time, the second animating to its full width in the second second and the third in the third second.

That way aspects such as the lines not being visible to start with are dealt with.

#global {
  width: 200px;
  position: relative;
  cursor: pointer;
  height: 200px;
  background-color: black;
  padding: 1rem;
}

.mask {
  position: absolute;
  border-radius: 2px;
  overflow: hidden;
  perspective: 1000;
  backface-visibility: hidden;
}

.plane {
  background: #ffffff;
  width: 400%;
  height: 100%;
  position: absolute;
  transform: translate3d(0px, 0, 0);
  z-index: 100;
  perspective: 1000;
  backface-visibility: hidden;
}

#top .plane {
  z-index: 2000;
  animation: trans1 3s ease-in infinite forwards;
}

#middle .plane {
  transform: translate3d(0px, 0, 0);
  background: #bbbbbb;
  animation: trans2 3s linear infinite forwards;
}

#bottom .plane {
  z-index: 2000;
  animation: trans3 3s ease-out infinite forwards;
}

#top {
  width: 200px;
  height: 15px;
  left: 0;
  z-index: 100;
  transform: skew(-15deg, 0);
  border-radius: 20px;
}

#middle {
  width: 187px;
  height: 25px;
  left: 6px;
  top: 78px;
  transform: skew(-15deg, -40deg);
  border-radius: 20px;
}

#bottom {
  width: 200px;
  height: 15px;
  top: 159px;
  transform: skew(-15deg, 0);
  border-radius: 20px;
}

@keyframes trans1 {
  0% {
    width: 0%;
    left: 0;
  }
  33.33% {
    width: 100%;
    left: 0;
  }
  100% {
    width: 100%;
    left: 0;
  }
}

@keyframes trans2 {
  0% {
    width: 0%;
    left: 100%;
  }
  33.33% {
    width: 0%;
    left: 100%;
  }
  66.66% {
    width: 100%;
    left: 0;
  }
  100% {
    width: 100%;
    left: 0;
  }
}

@keyframes trans3 {
  0% {
    width: 0%;
    left: 0;
  }
  66.66% {
    width: 0%;
    left: 0;
  }
  100% {
    width: 100%;
    left: 0;
  }
}

<div id="global">
  <div id="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>