CSS动画延迟时序问题：无限循环边框动画与元素凸起动画不同步如何解决

问题根本原因 #

你遇到的动画漂移问题本质是两个独立动画的周期长度不一致：

• 边框动画周期为2s
• 容器凸起动画你设置了2.1s的周期
  二者每运行一次就会产生0.1s的时间差，迭代次数越多偏差越明显，1分钟后已经累积了3s的偏差，自然会出现明显的不同步。
  另外你现有的容器动画关键帧逻辑也有问题：100%节点仍然保持scale为1.05，会导致下一轮循环开始时出现突兀的样式跳变。

最优实现方案 #

你参考的迭代延迟实现思路是对的，但需要保证两个动画的周期完全对齐，把凸起的有效动画时长压缩到周期的前5%（对应0.1s）即可，修正后的代码如下：

.container {
  position: relative;
  width: 100px;
  height: 100px;
  background: pink;
  border-radius: 50%;
  margin: 50px auto;
  /* 和边框动画保持完全相同的2s周期 */
  animation: containerAnimation 2s infinite;
}

.animated-border {
  position: absolute;
  left: 0;
  top: 0; /* 补充原本缺失的top对齐 */
  width: 97px;
  height: 97px;
  border: 2px solid;
  border-radius: 50%;
  animation: borderAnimation 2s infinite;
}

@keyframes containerAnimation {
  0% {
    transform: scale3d(1, 1, 1);
  }
  /* 前0.1s完成凸起 */
  5% {
    transform: scale3d(1.05, 1.05, 1);
  }
  /* 0.1s后立刻恢复原始大小，保持到周期结束 */
  5.1%, 100% {
    transform: scale3d(1, 1, 1);
  }
}

@keyframes borderAnimation {
  0% {
    transform: scale3d(1, 1, 1);
    opacity: 1;
  }
  100% {
    transform: scale3d(2, 2, 1);
    opacity: 0;
  }
}

<div class="container">
  <div class="animated-border"></div>
</div>

该方案通过让两个动画共用相同的2s周期，从根源上避免了时间差累积的问题，永远不会出现漂移。如果需要保证极端场景下的同步性，可以给两个动画添加相同的animation-delay参数统一启动时机，或者用JS同时触发两个动画的播放。

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