如何强制CSS元素动画从上一次动画结束的位置开始播放

CSS动画的触发规则是：只有当animation属性的值发生变化时，浏览器才会重新执行动画流程。你连续两次为元素设置完全相同的动画配置（比如两次都是E 2s ease-in-out forwards），浏览器会判定动画没有变更，直接跳过过渡过程应用动画最终状态，就会出现元素瞬间跳转的问题。

同时你原代码中给left、top赋值时没有加px单位，部分浏览器可能会识别失败导致位置偏移，也建议同步修复。

在设置新的动画配置前，先清空原有动画属性，强制触发浏览器重排后再赋值新的动画配置即可。

修改后的nextPulseAnimate函数代码如下：

function nextPulseAnimate() {
    pulse++;
    for(var index = 0; index < units.length; index++) {
    
        var unit = units[index];
        var direction = unit.moves[pulse-1]
        
        var unitElement = document.getElementById(unit.name);

        unitElement.style.left = unit.start.x + 'px'; // 补全单位避免兼容性问题
        unitElement.style.top = unit.start.y + 'px';

        // 新增两行代码修复同方向动画不触发问题
        unitElement.style.animation = 'none';
        void unitElement.offsetWidth; // 读取offsetWidth强制触发浏览器重排

        unitElement.style.animation = direction + " 2s ease-in-out forwards";
    }

    for(var index = 0; index < units.length; index++) {
        var unit = units[index];
        var direction = unit.moves[pulse-1]
            
        switch (direction){
         case "N":
             unit.start.y -= 60; 
             break;
         case "E": 
             unit.start.x += 60;
             break;
         case "S":
             unit.start.y += 60;
             break; 
         case "W": 
             unit.start.x -= 60;
             break;
         }
    }
}

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