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

开：悬停，我想将不透明度更改为.5但似乎在使用@keyframe动画属性后，无法更改。

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

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

Answer 1

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

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

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

Answer 2

这解决了问题

opacity: 0.5 !important;

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

Demo

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

2 个答案: