How can I change a css property after it has been @keyframe animated?

Question

I'm fading in some buttons with @keyframe animation from opacity: 0 to opacity: 1.

div{
    opacity: 1;
    animation: fadeIn 1s forwards;    
    -webkit-animation: fadeIn 1s forwards;
}

@-webkit-keyframes fadeIn {
    0%{
        opacity: 0;
    }100%{
        opacity: 1;   
    }
}

@keyframes fadeIn {
    0%{
        opacity: 0;
    }100%{
        opacity: 1;   
    }
}

div:hover{
    opacity: .5 !important; /* THIS DOES NOT HAPPEN BECAUSE THE OPACITY WAS ANIMATED */
    color: red;
}

On :hover, I'd like to change the opacity to .5 but it appears that after a property is animated using @keyframe, it can't be changed.

Simple example: http://jsfiddle.net/Lzcedmuq/3/

---

PS: In the real web-app, I am also scaling the buttons in so the fix I need is more than just for opacity. I need to be able to change any property that has been animated. I can do it with JS hackery but I don't want to.

Answer 1

Disable the animation as part of the hover state:

div:hover{
    opacity: .5;
    -webkit-animation: none;
    animation: none;
    color: red;
}

One issue with this is that the animation will restart when the hover ends.

Answer 2

This fixed the problem

opacity: 0.5 !important;

I can't answer to why the browser doesn't allow changes to animated styles, but it must have a higher priority then any new specified styles... so with that in mind you can use the !important to force that style to take top priority.

Demo