如何在 @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;
}

在 :hover 上，我想将不透明度更改为 .5，但似乎在使用 @keyframe 为属性设置动画后，它无法更改。

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

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

Answer 1

这解决了问题

opacity: 0.5 !important;

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

Demo

Answer 2

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

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

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

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

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

html

css

animation

css-transitions