html语言让动画停止,css3怎么让动画停止？

css3中想要让动画停止，可以使用animation-play-state属性。下面本篇文章就来给大家介绍一下CSS3 animation-play-state属性，希望对大家有所帮助。

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

语法：animation-play-state: paused|running;

属性值：paused：规定动画已暂停。

running：规定动画正在播放。

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

注：Internet Explorer 9 以及更早的版本不支持 animation-play-state 属性。

css animation-play-state属性使用示例

div

{

width:100px;

height:100px;

background:red;

position:relative;

animation:mymove 5s;

animation-play-state:running;

/* Safari and Chrome */

-webkit-animation:mymove 5s;

-webkit-animation-play-state:running;

}

div:hover{

animation-play-state:paused;

-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;}

}

效果图：