CSS3 :hover wont work after animation

Question

我有一个 DIV，它在 :hover 时将 bgcolor 更改为蓝色。单击按钮添加将 bgcolor 动画设置为绿色的类。但现在 :hover 不起作用(背景颜色不会变为蓝色)。

为什么？

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

DEMO

您可以为 .trigger-bg-change 使用以下 CSS 规则:

.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 属性从 forwards 更改为 none，动画不会将样式应用于它之后的元素已经执行，所以 .box:hover 的规则不会被覆盖。