- HTML中文网
- 联系QQ:88526
- QQ交流群

- 微信公众号

animation-play-state属性
含义:
animation--play-state属性可以指定动画是否正在运行或已暂停。
注意:在JavaScript中使用此属性在一个周期中暂停动画。
浏览器支持:
属性 | ![]() | ![]() | ![]() | ![]() | ![]() |
浏览器 | IE | Chrome | Firefox | Safari | Opera |
animation-play-state | 10.0 | 43.0/4.0 -webkit- | 16.0/5.0 -moz- | 9.0/4.0 -webkit- | 30.0 15.0 -webkit- 12.0 -o- |
CSS语法:
animation-play-state: paused|running;
属性值:
paused :指定暂停动画
running:指定正在运行的动画
暂停动画
<style type="text/css"> div{ width:100px; height:100px; position: relative; background-color:hsl(120,65%,75%); animation:demo 5s 1 ; -webkit-animation:demo 5s 1; animation-play-state:paused; -webkit-animation-play-state:paused; } @keyframes demo { from {left:0px;} to {left:350px; } } /*Safari 和 Chrome */ @-webkit-keyframes demo { from {left:0px;} to {left:350px; } } </style> </head> <body> <div></div> </body>
点击 "运行实例" 按钮查看在线实例
效果图:
推荐手册