为什么与两个动画共享一个KeyframesEffect会导致一个动画永远不会结束？

在Web Animations API中，KeyframesEffect是一个表示动画关键帧的对象。当你创建一个动画时，你会指定一个KeyframesEffect以及动画的其他属性，如持续时间、延迟、迭代次数等。

如果你尝试将两个动画共享同一个KeyframesEffect实例，可能会遇到一个问题：这两个动画会共享相同的动画状态。这意味着，当一个动画完成时，另一个动画也会立即结束，因为它们共享相同的KeyframesEffect实例。

为了避免这个问题，你应该为每个动画创建一个新的KeyframesEffect实例。这样，每个动画都会有自己独立的动画状态，互不干扰。

例如：

// 创建第一个动画的 KeyframesEffect
const keyframes1 = new KeyframesEffect(
  element,
  [
    { transform: 'translateX(0)' },
    { transform: 'translateX(100px)' }
  ],
  { duration: 1000, iterations: Infinity }
);

// 创建第二个动画的 KeyframesEffect
const keyframes2 = new KeyframesEffect(
  element,
  [
    { transform: 'scale(1)' },
    { transform: 'scale(1.5)' }
  ],
  { duration: 2000, iterations: Infinity }
);

// 创建并运行动画
const animation1 = new Animation(keyframes1, document.timeline);
const animation2 = new Animation(keyframes2, document.timeline);

animation1.play();
animation2.play();

通过为每个动画创建独立的KeyframesEffect实例，你可以确保它们不会互相干扰，从而避免一个动画永远不会结束的问题。