如何使用CSS实现字母Z分步动画，解决三段动画同步触发问题

问题根因 #

你的代码出现同步显示的核心问题是.plane类默认设置了width:400%，动画启动前元素就已经处于可见状态，所以你设置的延迟看起来没有生效。同时斜向中段的动画参数也需要调整，匹配“从上到下出现”的效果。

修正后代码 #

CSS代码 #

#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;
    /* 初始宽度设为0，隐藏元素 */
    width:0;
    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;
    /* 延迟等于顶部动画时长1s */
    animation: trans2 1s linear infinite  1s  forwards;
    -webkit-animation: trans2 1s linear infinite  1s  forwards;
}

#bottom .plane{
    z-index:2000;
    /* 延迟等于前两个动画总时长1+1=2s */
    animation: trans3 2s ease-out infinite  2s forwards;
    -webkit-animation: trans3 2s ease-out infinite  2s forwards;
}
  
#top{
    width:200px;
    height:15px;
    left:0;
    top: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;
    }
    100% {
        width: 100%;
        left: 0;
    }
}

@keyframes trans2{ 
    0% {
        width: 0%;
        /* 从斜杠上端开始出现 */
        top: -100%;
        left: 0;
    }
    100% {
        width: 100%;
        top: 0;
        left: 0;
    }
}

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

HTML代码 #

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

修正说明 #

• 把.plane的默认宽度改为0，确保动画启动前元素不可见，真正通过动画控制显示时机
• 调整了第二、三段动画的延迟时间，严格匹配前序动画的总时长，实现顺序播放
• 优化了斜向中段的动画逻辑，改为从上到下的位移+宽度变化，更贴合需求描述的效果
• 如果你不需要循环播放，把三个动画的infinite参数删掉即可，动画播放完成后会保持最终状态。

内容的提问来源于stack exchange，提问作者h.m.p.frontendDeveloper