css3：动画后悬停不起作用

Question

我有一个 DIV，它在 :hover 时将 bgcolor 更改为蓝色。按钮单击添加了将 bgcolor 动画化为绿色的类。但是现在 :hover 不起作用（bgcolor 不会变成蓝色）。

为什么？

http://jsfiddle.net/EstSiim/me7t055c/

HTML：

<div class="box"></div>
<button class="animate-btn">Animate</button>

CSS：

.box {
        background-color: red;
        width: 200px;
        height: 200px;
    }
    .box:hover {
        background-color: blue;
    }

    .trigger-bg-change {
        -webkit-animation: bg-change 1s ease 0 1 forwards;
        animation: bg-change 1s ease 0 1 forwards;  
    }

    @-webkit-keyframes bg-change {
        0% {background-color:red;}
        100% {background-color:green;}
    }
    @-keyframes bg-change {
        0% {background-color:red;}
        100% {background-color:green;}
    }

JS：

$(function() {
        $('.animate-btn').on('click', function() {
            console.log('hey');
            $('.box').addClass('trigger-bg-change');
        });
});

Answer 1

演示版

您可以使用以下 CSS 规则来.trigger-bg-change代替：

.trigger-bg-change {
    background-color: green;
    -webkit-animation: bg-change 1s ease 0 1 none;
    animation: bg-change 1s ease 0 1 none;  
}

通过将animation-fill-mode属性从forwardsto更改none，动画在执行后不会将样式应用于 to 元素，因此 的 规则.box:hover不会被覆盖。