是否有一种纯粹的 CSS 方法可以在悬停时停止动画？答案

【问题标题】：Is there a pure css way to stop animation on hover?是否有一种纯粹的 CSS 方法可以在悬停时停止动画？
【发布时间】：2014-06-14 22:22:12
【问题描述】：

有没有办法在初始悬停期间停止持续触发动画？我正在尝试在悬停期间在图标上执行 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/

【问题讨论】：

css3 webkit animation stop on div:hover的可能重复
-webkit-animation-play-state: paused | running;

标签： css animation transform keyframe

【解决方案1】：

animation-play-state 属性可以暂停或恢复动画。它接受：

运行——默认；动画正常播放
paused — 动画暂停

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

See full tutorial on SitePoint.

【讨论】：

【解决方案2】：

尝试将此添加到您的 CSS 中

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

【讨论】：