如何使用纯css或最少js在结束帧停止无限css动画？

Question

我知道我们可以通过animation-fill-mode: forwards;停止有限的css动画。但是，如何为无限动画实现相同的效果？例如，对于以下代码段，当pointerup被触发时，如何在360deg状态停止动画？

＆＃13;

＆＃13;

document.addEventListener("pointerup", () => {
  const div = document.getElementsByTagName("div")[0];
  // 
});

＆＃13;

div {
  width: 100px;
  height: 100px;
  background: blue;
  position: relative;
  animation: ani 5s infinite;
}

@keyframes ani {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

附录：

1. 我知道我们可以在JS中使用计时器，并检查在每个计时器间隔中是否引发pointerup，但是首选的是包含纯css或最少js的解决方案。
2. 我们应该确保该解决方案在现代浏览器中运行良好，例如Google Chrome和Microsoft Edge。

Answer 1

试试此链接

Stop infinite CSS3 animation and smoothly revert to initial state

您将了解如何操作。对我来说很好。

Answer 2

试试这个：

＆＃13;

＆＃13;

div = document.getElementsByTagName("div")[0];
div.addEventListener("pointerup", (ev) => {
  ev.target.className = "stopme";
});

＆＃13;

div {
  width: 100px;
  height: 100px;
  background: blue;
  position: relative;
  animation: ani 5s infinite;
}

div.stopme{
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}

@keyframes ani {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;