CSS实现animation暂停效果

通过Css3 ‘animation-play-state’ 属性的【running｜paused】设置来实现动画的暂停和运行

animation-play-state: running;
animation-play-state: paused;

在Javascript中通过监听元素的

const animated = document.querySelector(".animated");

animated.addEventListener("animationend", () => {
  console.log("Animation ended");
});

animated.onanimationend = () => {
  console.log("Animation ended");
};

MDN css3 animation play state 控制动画的启停

MDN javascript 监听元素动画事件

浏览器兼容性