css动画怎么暂停 |css动画自动滑动

一、使用animation-play-state属性

animation-play-state: paused;

当animation-play-state属性取值为paused时，动画便会暂停。同时，也可以调用JavaScript来控制动画的开始和暂停：

var animation = document.getElementById('animation');
animation.style.animationPlayState = 'running';  //运行动画
animation.style.animationPlayState = 'paused';   //暂停动画

二、使用transition属性

大家也可以使用transition属性来暂停CSS动画。要实现这个效果，大家需要用到transition-delay属性将元素的效果延迟到无限大值：

transition: all 0s linear 9999s;

这样，CSS将会认为该元素的transition效果要在9999秒后才会应用，也就是永远不会应用。如果大家想要继续运行动画，只需改变delay的值即可：

animation-delay: 0s;

三、使用JavaScript

最后的方式是使用JavaScript来暂停动画。具体实现方式与第一种方式类似：

var animation = document.getElementById('animation');
animation.classList.add('paused'); //添加paused类
animation.classList.remove('paused'); //移除paused类

总结：

以上三种方式均可以实现CSS动画的暂停。在选择具体实现方式时，需要根据自己的实际需求来选择。如果需要在实际业务中应用，建议选择最为简便实用的方式。