Rumah > Artikel > hujung hadapan web > css animation-play-state属性怎么用
css animation-play-state属性怎么用
- 藏色散人asal
- 2019-05-29 09:26:462960semak imbas
css animation-play-state属性规定动画正在运行还是暂停。animation-play-state: paused;表示动画已暂停，animation-play-state: running;表示动画正在播放。
css animation-play-state属性怎么用？
作用：animation-play-state 属性规定动画正在运行还是暂停。
语法：
animation-play-state: paused|running;
说明：paused 规定动画已暂停。running 规定动画正在播放。
注释：您可以在 JavaScript 中使用该属性，这样就能在播放过程中暂停动画。
css animation-play-state属性使用示例
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s;
animation-play-state:paused;
/* Safari and Chrome */
-webkit-animation:mymove 5s;
-webkit-animation-play-state:paused;
}
@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
from {left:0px;}
to {left:200px;}
}
</style>
</head>
<body>
<p><strong>注释：</strong>Internet Explorer 9 以及更早的版本不支持 animation-play-state 属性。</p>
<div></div>
</body>
</html>效果：
Atas ialah kandungan terperinci css animation-play-state属性怎么用. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：css animation-iteration-count属性怎么用Artikel seterusnya：css animation-timing-function属性怎么用