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

Posted 2023-03-06

【中文标题】@keyframe 动画后如何更改 css 属性？

【英文标题】：How can I change a css property after it has been @keyframe animated?

【发布时间】：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。

【参考方案1】：

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

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

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

【讨论】：

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

【参考方案2】：

这解决了问题

opacity: 0.5 !important;

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

Demo

【讨论】：

在 Chrome 42 中不适合我。什么浏览器？我正在更新 jsfiddle 链接以包含它，因为感觉它应该可以工作。

嗯，所以它在 chrome 中不起作用，我正在测试其他浏览器，我会回复你