使用linear时间函数时animationend事件为何延迟触发？

你的需求是让animationend在动画视觉完成的瞬间立即触发，但即使使用linear缓动也没解决延迟问题。这是因为你的动画首尾关键帧（0%和100%）的letter-spacing值完全一致，浏览器可能会因为这个原因延迟或不准确地触发animationend事件。

可行解决方案 #

方案1：微调动画关键帧，打破首尾属性一致性 #

修改动画的100%帧属性，设置一个和初始值极其接近但有微小差异的数值，让浏览器能精准识别动画结束节点：

@keyframes morph {
  0% {
    letter-spacing: -500px;
  }
  40% {
    letter-spacing: 0px;
  }
  60% {
    letter-spacing: 0px;
  }
  100% {
    letter-spacing: -500.01px; /* 微小差异触发精确结束判断 */
  }
}

这个改动不会影响视觉效果，但会让浏览器准确捕捉动画结束时刻，animationend会在视觉完成瞬间触发。

方案2：手动监听动画状态，自定义触发时机 #

通过requestAnimationFrame实时检测元素的计算样式，当达到目标状态时手动执行回调，完全规避原生事件的延迟问题：

const aniElement = document.querySelector('h1.ani');

function checkAnimationComplete() {
  const style = window.getComputedStyle(aniElement);
  const currentSpacing = parseFloat(style.letterSpacing);
  // 考虑浮点精度误差，判断是否接近目标值
  if (Math.abs(currentSpacing + 500) < 0.1) {
    console.log("invoked");
    return;
  }
  requestAnimationFrame(checkAnimationComplete);
}

// 启动监听
checkAnimationComplete();

这种方式完全由你控制触发时机，适合需要更灵活动画控制的场景。

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