带框架防止的 CSS 动画：悬停答案

【问题标题】：CSS animation with frame prevent :hover带框架防止的 CSS 动画：悬停
【发布时间】：2015-04-13 17:15:23
【问题描述】：

我正在做一个带有背景过渡的 CSS animation，我希望 :hover 有一个不同的背景。但它不起作用：当我将光标悬停在 div 上时，动画仍在播放但不考虑悬停状态。

当我删除动画时，它可以完美运行。

你有什么想法吗？

谢谢

.loaderGif{
            width: 465px;
            height: 465px; 
            background: url('../images/loader01.png');
            background-size: cover;
            -webkit-animation: animLoader 4s infinite;
            animation:         animLoader 4s infinite;}

@-webkit-keyframes animLoader {
              0%   { background: url('../images/loader01.png'); }
              50% { background: url('../images/loader02.png'); }
              100% { background: url('../images/loader01.png'); }
            }

.loaderGif:hover{
                background: url('../images/loaderBlack.gif');
            }

【问题讨论】：

标签： html css animation hover frame

【解决方案1】：

动画中的 CSS 声明会覆盖动画中的其他声明：

"CSS 动画影响计算的属性值。在动画执行期间，属性的计算值由动画控制。这会覆盖在正常样式系统中指定的值。动画会覆盖所有常规规则，但会被覆盖按照！重要的规则。” - http://www.w3.org/TR/css3-animations/

一旦动画结束，.loaderGif:hover 将被激活，但万一它永远不会因为动画是无限的。

要解决您的问题，请将您的代码更改为

.loaderGif:hover{              
    -webkit-animation: none;
    animation:         none;
    background: url('../images/loaderBlack.gif');
}

【讨论】：