为什么anime.js实现CSS属性动画时会跳过部分延迟设置？

anime.js 中同一目标元素的同一 CSS 属性如果被多个独立的动画实例绑定，后创建的实例会默认覆盖前序实例对该属性的控制权，且每个动画实例初始化时就会读取属性当前的初始值作为动画起点，不会自动继承前序同属性动画的结束值。
你提交的代码中两个动画实例是同步创建的，第二个实例创建后直接覆盖了第一个对left属性的控制权，4秒延迟结束后直接从初始的100px往700px执行，自然看不到第一段到300px的动画。

• 方案1：使用关键帧把同属性的多段动画写在同一个anime实例中
  同个实例下的关键帧会自动按顺序执行，不会出现覆盖问题，代码示例：

anime({
  targets: '#square',
  left: [
    {value: 300, delay: 2000}, // 页面加载后2s执行第一段，移动到300px
    {value: 700, delay: 1000}  // 第一段结束后延迟1s执行第二段，总时间刚好为4s
  ]
});

• 方案2：通过complete回调串联多个独立动画
  等待前一段动画完全执行完成后再初始化下一段动画，保证下一段动画的起始值是前一段的结束值：

// 第一段动画
anime({
  targets: '#square',
  left: 300,
  delay: 2000,
  complete: function() {
    // 第一段执行完成后触发第二段
    anime({
      targets: '#square',
      left: 700,
      delay: 1000
    });
  }
});

• 方案3：使用anime.timeline时间线管理（多段动画最优方案）
  时间线是anime官方提供的序列动画管理API，支持灵活调整各段动画的触发时间，代码可维护性更高：

const tl = anime.timeline();
tl.add({
  targets: '#square',
  left: 300,
  delay: 2000
})
.add({
  targets: '#square',
  left: 700
}, 4000); // 第二个参数为绝对时间，指定页面加载后4s触发第二段动画

只要避免对同一目标的同一属性同时声明多个独立的动画实例，改用官方提供的序列动画管理方式组织代码，就可以完全规避该问题。对于多段连续动画，优先使用时间线或者关键帧写法，代码结构更清晰也更容易维护。

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