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

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;
}

On:hover,我想将不透明度更改为.5,但似乎在使用@keyframe动画属性后,无法更改.

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

---

PS:在真正的网络应用程序中,我也在缩放按钮,所以我需要的修复不仅仅是不透明度.我需要能够更改任何已设置动画的属性.我可以用JS hackery来做,但我不想.

Answer 1

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

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

这个问题的一个问题是当悬停结束时动画将重新启动.