是否可以 - on:hover 暂停 css3 动画并更改其背景颜色？

Posted 2023-03-06

【中文标题】是否可以 - on:hover 暂停 css3 动画并更改其背景颜色？

【英文标题】：Is it possible to - on:hover pause css3 animation and change its background color?

【发布时间】：2013-06-24 00:30:57

【问题描述】：

我正在使用关键帧不断更改<a> 链接的字体颜色。在:hover 上，我希望能够停止动画并定义字体颜色。

@-webkit-keyframes fontt 
  0%, 100% font-size:50px;color:black;      
  50% color:red;
#box a -webkit-animation: fontt 2s infinite;
#box a:hover color:#4480e8;-webkit-animation-play-state: paused;

是否可以暂停关键帧并更改字体颜色？

我尝试使用!important，

我尝试将color:red; 放在不同的命名约定上（a:hover、#box a:hover、#box:hover a

暂停的关键帧会覆盖我的:hover吗？有没有办法设置优先级？

示例：http://jsfiddle.net/rvBS2/

【参考方案1】：

关键帧设置的规则似乎在级联中具有更高的重要性。我不确定这是否应该是这种情况，但@media rules 具有***别的重要性。 @keyframes 也应该，否则这是一个错误。级联规范没有具体提及它们。

您可以完全删除动画，而不是使用pause。

#box a:hover -webkit-animation: none;color:red; font-size: 50px;

http://jsfiddle.net/rvBS2/1/

【讨论】：

这正是我想要的。如果我想让它在:hover 上有不同的动画，我可以添加类似@-webkit-keyframes font2 0%, 100% font-size:50px; color:red; 50% color:black; 和#box a:hover -webkit-animation: fonti;font-size:50px; 的内容吗

@user2118228 可能；你可以在 jsfiddle 中尝试一下

它似乎没有这样做。可能是伪类激活动画的问题吗？？

嗯，我试了两次都没用。一定是语法错误。非常感谢您的帮助，先生。愿你的爆炸是爆炸！！！此案已结案！

赞成这一点，因为它清楚地说明了更高的关键帧重要性。解释了我的一个动画在元素上也使用悬停（触发关键帧）时遇到的问题，不再考虑悬停的平滑过渡。

【参考方案2】：

-webkit-animation-play-state: paused 和 -webkit-animation-play-state: running