如何用Anime.js实现与CSS一致的无缝循环波纹扩散动画？

问题分析 #

你用CSS实现的无限循环扩散动画是无缝衔接的，但Anime.js版本出现循环停顿，核心原因是：

• CSS中每个.box-item是独立执行无限循环动画，各自带有不同延迟，互不干扰；
• 你之前的Anime.js写法是把所有元素作为一个动画组，设置整体循环，导致循环时所有元素会同步重置到初始状态，从而出现停顿。

CSS实现参考代码 #

<div class="box">
  <span class="box-item" style="--i: 1"></span>
  <span class="box-item" style="--i: 2"></span>
  <span class="box-item" style="--i: 3"></span>
  <span class="box-item" style="--i: 4"></span>
  <span class="box-item" style="--i: 5"></span>
</div>

<style>
.box {
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 300px;
}

.box-item {
  animation: animate 3s linear infinite;
  animation-delay: calc(1s * var(--i));
  position: absolute;
  box-sizing: border-box;
  border-radius: 100%;
  background: #e5f6ff;
  box-shadow: inset 0 0 40px 20px;
}

@keyframes animate {
  0% {
    width: 0;
    height: 0;
    opacity: 1;
  }

  100% {
    width: 300px;
    height: 300px;
    opacity: 0;
  }
}
</style>

修正后的Anime.js实现代码 #

我们需要给每个元素创建独立的无限循环动画，匹配CSS中每个元素的延迟和循环逻辑：

<div class="box">
  <span class="box-item"></span>
  <span class="box-item"></span>
  <span class="box-item"></span>
  <span class="box-item"></span>
  <span class="box-item"></span>
</div>

<style>
.box {
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 300px;
}

.box-item {
  position: absolute;
  box-sizing: border-box;
  border-radius: 100%;
  background: #e5f6ff;
  box-shadow: inset 0 0 40px 20px;
  /* 设置初始状态，对应CSS动画的0% */
  width: 0;
  height: 0;
  opacity: 1;
}
</style>

<script>
const boxItems = document.querySelectorAll(".box-item");

// 给每个元素创建独立的无限循环动画
boxItems.forEach((item, index) => {
  anime({
    targets: item,
    easing: "linear",
    duration: 3000, // 和CSS动画时长一致
    loop: true,
    // 定义动画结束状态，对应CSS动画的100%
    to: {
      width: 300,
      height: 300,
      opacity: 0
    },
    // 匹配CSS的延迟规则：1s * (索引+1)，对应--i从1到5
    delay: (index + 1) * 1000
  });
});
</script>

关键修改点 #

1. 独立动画替代动画组：每个.box-item单独执行动画，避免组循环时的同步重置停顿；
2. 匹配延迟规则：用(index + 1) * 1000实现和CSS中calc(1s * var(--i))完全一致的延迟；
3. 初始状态预设：在CSS中给.box-item设置初始样式，和动画起始状态对齐，避免动画开始前的样式跳变；
4. 简化动画定义：直接用to定义结束状态，保持和CSS动画的线性过渡逻辑一致。

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