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

Question

我正在使用关键帧来不断更改<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/

Answer 1

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

pause您可以完全删除动画,而不是使用.

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

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