CSS3动画技术问询：实现条形元素沿正方形路径多阶段运动

你遇到的核心问题是多阶段动画的时序衔接和旋转后位置控制的问题——当前代码把左右移动和旋转下移拆成了两个独立动画，但没有正确触发和串联它们，同时旋转后的位置计算也需要结合变换原点来调整。下面是调整后的完整解决方案：

修正后的完整代码 #

<div id="overlay">
  <div class="main-box">
    <div class="loader-bar"></div>
  </div>
</div>

<style>
#overlay{ 
  position: fixed; 
  top: 0; 
  right: 0; 
  bottom: 0; 
  left: 0; 
  background: #000; 
}
.main-box{ 
  position: absolute; 
  width: 100px; 
  height: 100px; 
  border:30px solid #fff; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  top: 0; 
  margin: auto; 
}
.loader-bar{ 
  height: 30px; 
  width: 50px; 
  background: #ea2330; 
  position: absolute; 
  top: -30px; 
  left: -30px;
  /* 统一设置单个动画，总时长=左移5s + 旋转过渡0.5s + 延迟15s + 下移5s = 25.5s */
  animation: squarePath 25.5s linear infinite;
  /* 设置旋转原点为左上角，确保旋转后贴合正方形边框 */
  transform-origin: 0 0;
}

@keyframes squarePath {
  /* 阶段1：从左向右移动（0-5s，对应总时长的0%-~19.6%） */
  0% {
    left: -30px;
    top: -30px;
    transform: rotate(0deg);
  }
  19.6% {
    left: 100px; /* 正方形宽度100px，从-30到100刚好走完上边 */
    top: -30px;
    transform: rotate(0deg);
  }
  /* 阶段2：旋转90度（5s-5.5s，对应19.6%-21.5%） */
  21.5% {
    left: 100px;
    top: -30px;
    transform: rotate(90deg);
  }
  /* 阶段3：延迟15秒（5.5s-20.5s，对应21.5%-80.4%） */
  80.4% {
    left: 100px;
    top: -30px;
    transform: rotate(90deg);
  }
  /* 阶段4：从上向下移动（20.5s-25.5s，对应80.4%-100%） */
  100% {
    left: 100px;
    top: 100px; /* 正方形高度100px，从-30到100刚好走完右边 */
    transform: rotate(90deg);
  }
}

/* 兼容webkit内核浏览器 */
@-webkit-keyframes squarePath {
  0% {
    left: -30px;
    top: -30px;
    -webkit-transform: rotate(0deg);
  }
  19.6% {
    left: 100px;
    top: -30px;
    -webkit-transform: rotate(0deg);
  }
  21.5% {
    left: 100px;
    top: -30px;
    -webkit-transform: rotate(90deg);
  }
  80.4% {
    left: 100px;
    top: -30px;
    -webkit-transform: rotate(90deg);
  }
  100% {
    left: 100px;
    top: 100px;
    -webkit-transform: rotate(90deg);
  }
}
</style>

关键调整说明 #

• 单个动画串联所有阶段：把原来的两个独立动画合并成一个squarePath动画，用关键帧的百分比精准控制每个阶段的时序，避免多个动画触发的冲突问题。
• 旋转原点修正：设置transform-origin: 0 0（左上角），这样旋转90度后，条形元素的起点会刚好贴合正方形的右上角，保证路径的连贯性。
• 时序精准计算：总时长按你的需求拆分：
  • 左移5s：占总时长的 5/25.5 ≈ 19.6%
  • 旋转过渡0.5s：从19.6%到21.5%
  • 延迟15s：从21.5%到80.4%（(5+0.5+15)/25.5 ≈80.4%）
  • 下移5s：从80.4%到100%
• 位置属性修正：旋转后条形的方向变为向下，所以用top属性控制下移，而不是原来的right，确保移动路径贴合正方形的右边框。

这样调整后，条形元素就能严格按照你要求的路径和时序循环运动了。

内容的提问来源于stack exchange，提问作者user3098149