Question

我有一个名为logo的div的onhover动画。当鼠标悬停在上面时，我想让徽标倾斜。但是，我不希望徽标在动画结束时返回到原始状态，直到有人将鼠标移出元素（鼠标移出）。

#logo:hover{
    -webkit-animation-name:logorotate;
    animation-name:logorotate;
    -webkit-animation-duration:0.5s;
}
@-webkit-keyframes logorotate{
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(10deg);
    }
}

Answer 1

如果你想悬停到有状态，并且有人悬停时变化是平滑的，那就是过渡而不是动画

#logo{
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
}

#logo:hover{
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
}

Answer 2

尝试这样的事情：

#logo.mousein{
    -webkit-animation-name:logorotate;
    animation-name:logorotate;
    -webkit-animation-duration:0.5s;
}
@-webkit-keyframes logorotate{
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(10deg);
    }
}

然后添加以下jquery：

$(document).read(function(){
     $("#logo").mouseover(function(){
        $(this).addClass("mousein");
     });

});

（尚未对代码进行测试，但可以使用）

动画悬停并在CSS完成时动画冻结

2 个答案: