Question

有没有办法在初始悬停期间停止持续触发动画？我正在尝试在悬停期间在图标上执行css动画。当我将鼠标移到元素上时，图标会不稳定地反弹，直到我停止移动鼠标，有时在动画期间挂起。我知道动画在初始悬停时触发，直到我停止，但我希望效果完全运行一次并停止，除非我将其悬停。

HTML

<div class="box">
    <a href="#" class="animate bounce"><img src="imagename.png" /></a>
</div>

CSS

a {display: block;}

.animate {
    -webkit-animation-duration: .9s;
    animation-duration: .9s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes bounce {
    0%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    }
    10% {
    -webkit-transform: translateY(-25px);
    transform: translateY(-25px);
    }
    20% {
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
    }
    30% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
    }
    60% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
    }
}

@keyframes bounce {
    0%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    }
    10% {
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
    }
    20% {
    -webkit-transform: translateY(10px);
    -ms-transform: translateY(10px);
    transform: translateY(10px);
    }
    30% {
    -webkit-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    transform: translateY(-15px);
    }
    60% {
    -webkit-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px);
    }
}

.bounce:hover,
.bounce:focus {
    -webkit-animation-name: bounce;
    animation-name: bounce;
}

我附上了一个我得到的结果的jsfiddle。 http://jsfiddle.net/jordan911z/M3vZ2/

Answer 1

动画播放状态属性可以暂停或恢复动画。它接受：

正在运行 - 默认值;动画正常播放
暂停 - 动画暂停

#myelement:hover, #myelement:focus {
    animation-play-state: paused;
}

See full tutorial on SitePoint.

Answer 2

尝试将此添加到您的CSS

animation-play-state: paused;
-webkit-animation-play-state: paused; /* Safari and Chrome */

是否有一种纯粹的CSS方式来停止悬停动画？

2 个答案: