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

Question

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

@-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/

Answer 1

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

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

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

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

Answer 2

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