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

【问题标题】：Is it possible to - on:hover pause css3 animation and change its background color?是否可以 - on:hover 暂停 css3 动画并更改其背景颜色？
【发布时间】：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/

【问题讨论】：

标签： css animation colors hover css-animations

【解决方案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

【讨论】：