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

【问题标题】：How can I change a css property after it has been @keyframe animated?@keyframe 动画后如何更改 css 属性？
【发布时间】：2015-06-24 15:59:36
【问题描述】：

我正在使用 @keyframe 动画从 opacity: 0 到 opacity: 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;
}

在：悬停时，我想将不透明度更改为 0.5，但似乎在使用 @keyframe 为属性设置动画后，它无法更改。

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

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

【问题讨论】：

你应该告诉我们你测试过的浏览器
在 Chrome 42 和 Safari OSX 上测试。确认它确实适用于 FF。

标签： html css animation css-transitions

【解决方案1】：

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

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

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

【讨论】：

不错的技巧...但是如何在元素不再悬停后停止动画再次运行？每次我将光标移到我的元素之外，已经完成的原始动画再次运行......

【解决方案2】：

这解决了问题

opacity: 0.5 !important;

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

Demo

【讨论】：

在 Chrome 42 中不适合我。什么浏览器？我正在更新 jsfiddle 链接以包含它，因为感觉它应该可以工作。
嗯，所以它在 chrome 中不起作用，我正在测试其他浏览器，我会回复你