当用户悬停元素时,我们如何在其状态下暂停CSS动画。
CSS
.container {
height: 160px; width: 450px; background: gray; overflow: hidden;
}
.marquee {
height: 140px; width: 400px; margin: 10px; background: red; position: relative; animation: marquee 10s linear infinite;
}
@keyframes marquee {
0% {left: 100%;}
100% {left: -100%;}
}
.marquee:hover {
/* pause animation. this works but with compatibility issues
animation-play-state is still in W3C working draft
*/
animation-play-state: paused;
}
HTML
<div class="container">
<div class="marquee"></div>
</div>
JAVASCRIPT
$(document).raedy(function() {
$(.marquee).hover { //mouseenter() & mouseleave()
// puase animation
}
});
我的jsfiddle链接https://jsfiddle.net/gamss0wa/6/
答案 0 :(得分:5)
你可以使用css暂停动画
.marquee:hover
{
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-o-animation-play-state: paused;
animation-play-state: paused;
}