使用 webkit-animation-play-state 悬停时动画不会停止答案

【问题标题】：Animation not stopping on hover using webkit-animation-play-state使用 webkit-animation-play-state 悬停时动画不会停止
【发布时间】：2016-06-03 15:31:07
【问题描述】：

悬停不起作用。当鼠标悬停在 div 上时，动画必须停止并且不再开始。我更喜欢非 jQuery 解决方案。

CSS：

 .box:hover { -webkit-animation-play-state: paused;}

检查小提琴here。

【问题讨论】：

请给您的问题起一个描述性的标题，例如“Animation not stop on hover using webkit-animation-play-state”。
悬停不够具体，将.box:hover移到最后即可。另外，you don't usually need prefixes anymore.
@misterManSam 我更新了 jsfiddle 但是当鼠标离开 div 时，div 继续动画。但我想停止 div 的动画。

标签： css animation

【解决方案1】：

没有 JavaScript 或 jQuery 就无法实现一次性悬停：

CSS：

.one_time {
    -webkit-animation-play-state: paused;
}

JavaScript：

function hoverOnce(target, type, listener) {
    target.addEventListener(type, function fn(event) {
        target.removeEventListener(type, fn);
        listener(event);
    });
};

hoverOnce(document.getElementById("myelement"), "mouseover", function (event) {
    document.getElementById("myelement").className = "one_time";

});

jQuery:

$(".button-color-2").one("mouseenter", function(e){
    $("#myelement").addClass("one_time");
});

【讨论】：

【解决方案2】：

问题 1：您的动画正在覆盖您的动画播放状态。要解决这个问题，请将鼠标悬停在它之后。检查工作演示 here。

问题 2：如果没有 JavaScript，你就无法做到这一点，因为没有用于“once hovered”的 CSS 选择器。

CSS：

@keyframes ilkDenemem{
    0% {margin-left: 0}
    100% {margin-left: 300px}
}

@keyframes dondur{
    0%{ transform: rotate(0deg);}
    50%{transform: rotate(360deg);}
}

.box{
    width: 70px;
    height: 70px;
    background: #000;
    margin-bottom: 10px;
}


.box:nth-of-type(1){
    -webkit-animation: ilkDenemem 2s infinite,
    dondur 2s infinite;
}

.box:nth-of-type(2){
    -webkit-animation: ilkDenemem 1s alternate infinite; 
    -webkit-animation-delay :2s; /*Chrome, Safari , Opera*/
}

.box:nth-of-type(3){
    -webkit-animation: ilkDenemem 2s 1 ease-in; 
}

.box:nth-of-type(4){
    -webkit-animation: ilkDenemem 2s 1 ease-out; 
}

.box:nth-of-type(5){
    -webkit-animation: ilkDenemem 2s 1 ease-in-out; 
}

.box:nth-of-type(6){
    -webkit-animation: ilkDenemem 2s 1 steps(5); 
}

.box:nth-of-type(7){
    -webkit-animation: ilkDenemem 2s 1 cubic-bezier(0,1,.95,0); 
}

.box:hover {
    -webkit-animation-play-state: paused;
}

【讨论】：

你能用js给我解决问题2的方法吗