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 rules具有最高的重要性。 @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

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

2 个答案: