Question

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

CSS：

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

检查小提琴here。

Answer 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");
});

Answer 2

问题1：您的动画将覆盖您的动画播放状态。要解决这个问题，请将其悬停在它之后。查看有效的演示here。

问题2：如果没有JavaScript，你就无法做到这一点，因为没有用于“曾经悬停”的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;
}

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

2 个答案: