@keyframe 动画后如何更改 css 属性？

我正在淡入一些带有 @keyframe 动画的按钮，从不透明度：0 到不透明度：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;
}

在 :hover 上，我想将不透明度更改为 0.5，但似乎在使用 @keyframe 对属性进行动画处理后，无法更改它。

简单的例子：http://jsfiddle.net/Lzcedmuq/3/ http://jsfiddle.net/Lzcedmuq/3/

PS：在真正的网络应用程序中，我还缩放了按钮，因此我需要的修复不仅仅是不透明度。我需要能够更改任何已设置动画的属性。我可以用 JS hackery 来做到这一点，但我不想这样做。

禁用动画作为悬停状态的一部分：

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

这样做的一个问题是动画将在悬停结束时重新开始。