css3 :hover wont work after animation

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.