当用户将鼠标悬停在元素上时,我们如何在其状态下暂停 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/
最佳答案
你可以使用css暂停动画
.marquee:hover
{
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-o-animation-play-state: paused;
animation-play-state: paused;
}
关于jquery - 如何使用 jquery 在悬停时暂停 css 动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37914692/