animation-play-state:
css:
.play-state{
-webkit-animation:f1 2s 0.5s infinite linear forwards alternate;
-moz-animation:f1 2s 0.5s infinite linear forwards alternate;
position:relative;
left:10px;
width:100px;
height:100px;
margin:10px 0;
overflow:hidden;
}
.play-state:hover{
-webkit-animation-play-state:paused;
-moz-animation-play-state:paused;
}
@-webkit-keyframes f1{
0%{left:10px;}
100%{left:500px;}
}
@-moz-keyframes f1{
0%{left:10px;}
100%{left:500px;}
}
html:
<div class="play-state">鼠标移过来我就停,移走就运动,好听话哦!</div>
animation-play-state
时间: 2024-10-19 10:45:30