animation-play-state属性怎么用

2024-01-17 14:34 小编

CSS3animation-play-state属性

作用:animation-play-state属性规定动画正在运行还是暂停。

语法:

animation-play-state:paused|running;

paused:规定动画已暂停。

running:规定动画正在播放。

说明:您可以在JavaScript中使用该属性,这样就能在播放过程中暂停动画。

注:InternetExplorer9以及更早的版本不支持animation-play-state属性。

CSS3animation-play-state属性的使用示例

<!DOCTYPEhtml>

<html>

<head>

<style>

div

{

width:100px;

height:100px;

background:red;

position:relative;

animation:mymove5s;

animation-play-state:running;

/*SafariandChrome*/

-webkit-animation:mymove5s;

-webkit-animation-play-state:running;

}

div:hover{

animation-play-state:paused;

-webkit-animation-play-state:paused;

}

@keyframesmymove

{

from{left:0px;}

to{left:200px;}

}

@-webkit-keyframesmymove/*SafariandChrome*/

{

from{left:0px;}

to{left:200px;}

}

</style>

</head>

<body>

<div></div>

</body>

</html>


Tag: 怎么
在线咨询 拨打电话

电话

13363039260

微信二维码

微信二维码