css3 :hover wont work after animation

Question

I have a DIV which changes bgcolor to blue when :hover. Button click adds class which animates bgcolor to green. But now :hover wont work (bgcolor wont change to blue).

Why?

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

You can use the following CSS rules for .trigger-bg-change instead:

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

By changing the animation-fill-mode property from forwards to none, the animation will not apply the styles to to element after it has executed, so the rules for .box:hover will not get overridden.