怎么使css动画停止,如何用纯CSS方式实现CSS动画的暂停与播放效果？animation

1、怎么使css动画停止，如何用纯CSS方式实现CSS动画的暂停与播放效果？animation。使用纯CSS的方法，暂停或播放CSS动画。是不是看起来应该是不可能的实现的；或者就算可以实现，也是一个很麻烦的实现方法，需要用大量的css样式才可以实现。其实不然，在CSS3animation中，就有这样一个属性可以做到暂停、播放动画。本章就给大家介绍如何用纯CSS方式实现CSS动画的暂停与播放效果？animation-play-state属性介绍(详解)。有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。animation-play-state属性animation-play-state:

2、paused|running;animation-play-state:属性定义一个动画是否运行或者暂停。可以通过查询它来确定动画是否正在运行。另外，它的值可以被设置为暂停和恢复的动画的重放。如果借助Javascript，我们可以实现控制CSS动画的运行和播放，下面列出部分关键代码：html代码：stopcss代码：.animationwidth:100px;height:100px;margin:50pxauto;background:deeppink;animation:move2slinearinfinitealternate;keyframesmove0%transform:trans

3、late(-100px,0);100%transform:translate(100px,0);.btnwidth:50px;margin:10pxauto;text-align:center;border:1pxsolid#ddd;padding:10px;border-radius:5px;cursor:pointer;&:hoverbackground:#ddd;color:#333;&:activebackground:#aaa;js代码:document.querySelector(.btn).addEventListener(click：function()letbtn=docum

4、ent.querySelector(.btn);letelem=document.querySelector(.animation);letstate=elem.styleanimationPlayState;if(state=paused)elem.styleanimationPlayState=running;btn.innerText=stop;elseelem.styleanimationPlayState=paused;btn.innerText=play;);效果图(播放时和停止播放后)：纯CSS实现下面我们探讨下，使用纯CSS的方式能否实现。hover伪类实现使用hover伪类，

5、在鼠标悬停在按钮上面时，控制动画样式的暂停。关键代码如下:html代码：stopcss代码：.animationwidth:100px;height:100px;margin:50pxauto;background:deeppink;animation:move2slinearinfinitealternate;inputdisplay:none;keyframesmove0%transform:translate(-100px,0);100%transform:translate(100px,0);.btnwidth:50px;margin:10pxauto;text-align:cente

6、r;border:1pxsolid#ddd;padding:10px;border-radius:5px;cursor:pointer;&:hoverbackground:#ddd;color:#333;&:activebackground:#aaa;.stop:hover.animationanimation-play-state:paused;效果图：当然，这个方法不够智能，如果释放鼠标的自由，点击一下暂停、再点击一下播放就好了。还有其他方法吗？checked伪类实现之前的文章有趣的CSS题目(8):纯CSS的导航栏Tab切换方案也谈过，使用radio标签的checked伪类，加上实现纯C

7、SS捕获点击事情。并且利用被点击的元素可以控制一些CSS样式。实现如下：html代码：stopplaycss代码:.animationwidth:100px;height:100px;margin:50pxauto;background:deeppink;animation:move2slinearinfinitealternate;inputdisplay:none;keyframesmove0%transform:translate(-100px,0);100%transform:translate(100px,0);.btnwidth:50px;margin:10pxauto;text-

8、align:center;border:1pxsolid#ddd;padding:10px;border-radius:5px;cursor:pointer;&:hoverbackground:#ddd;color:#333;&:activebackground:#aaa;#stop:checked.animationanimation-play-state:paused;#play:checked.animationanimation-play-state:running;我们希望当#stop和#play两个radio被点击时，给.animation元素分别赋予animation-play-state:paused或是animation-play-state:running。而且二者只能生效其一，所以需要给两个radio标签