animation-play-state属性如何使用

  介绍

小编给大家分享一下animation-play-state属性如何使用,希望大家阅读完这篇文章后大所收获、下面让我们一起去探讨吧!

animation-play-state属性是用于指定动画是否正在运行或已暂停;可以通过和JavaScript一起使用,实现在播放过程中暂停动画的效果。

 animation-play-state属性如何使用“> </p> <p> </p> <p> <强>作用:</强> animation-play-state属性规定动画正在运行还是暂停。</p> <p> <强>语法:</强> </p> <pre类= 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属性如何使用“> </p> <p class=看完了这篇文章,相信你对animation-play-state属性如何使用有了一定的了解,想了解更多相关知识,欢迎关注行业资讯频道,感谢各位的阅读!

animation-play-state属性如何使用