介绍
小编给大家分享一下animation-play-state属性如何使用,希望大家阅读完这篇文章后大所收获、下面让我们一起去探讨吧!
animation-play-state属性是用于指定动画是否正在运行或已暂停;可以通过和JavaScript一起使用,实现在播放过程中暂停动画的效果。
animation-play-state:暂停|运行;
停了下来:规定动画已暂停。
运行:规定动画正在播放。
<强>说明:强>您可以在JavaScript中使用该属性,这样就能在播放过程中暂停动画。
<强>注:强> Internet Explorer 9以及更早的版本不支持animation-play-state属性。
& lt; !DOCTYPE html> & lt; html> & lt; head> & lt; style> div { 宽度:100 px; 身高:100 px; 背景:红色; 位置:相对; 动画:mymove 5 s; animation-play-state:运行;/* Safari和Chrome */-webkit-animation: mymove 5 s; -webkit-animation-play-state:运行; } div:{徘徊 animation-play-state:暂停; -webkit-animation-play-state:暂停; } @keyframes mymove { 从{左:0 px;} {左:200 px;} } @-webkit-keyframes mymove/* Safari和Chrome */{ 从{左:0 px;} {左:200 px;} } & lt;/style> & lt;/head> & lt; body> & lt; div> & lt;/div> & lt;/body> & lt;/html>
效果图:
看完了这篇文章,相信你对animation-play-state属性如何使用有了一定的了解,想了解更多相关知识,欢迎关注行业资讯频道,感谢各位的阅读!