如何在 css 属性@keyframe动画后对其进行更改

Question

我正在淡入淡出一些带有@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 上，我想将不透明度更改为 .5，但似乎在使用 @keyframe 对属性进行动画处理后，无法更改它。

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

---

PS：在真正的Web应用程序中，我也在缩放按钮，因此我需要的修复不仅仅是为了不透明度。我需要能够更改任何已动画的属性。我可以用JS黑客来做，但我不想。

Answer 1

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

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

这样做的一个问题是，当悬停结束时，动画将重新启动。

Answer 2

这解决了问题

opacity: 0.5 !important;

我无法回答为什么浏览器不允许更改动画样式，但它必须具有比任何新指定样式更高的优先级......因此，考虑到这一点，您可以使用 ！important 来强制该样式占据最高优先级。

演示