CSS 带帧阻止的动画 :hover

Question

我正在做一个带有背景转换的 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');
            }

Answer 1

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

"CSS Animations affect computed property values. During the execution of an animation, the computed value for a property is controlled by the animation. This overrides the value specified in the normal styling system. Animations override all normal rules, but are overriden by !important rules." - http://www.w3.org/TR/css3-animations/

动画结束后，.loaderGif:hover 将处于活动状态，但万一它永远不会因为动画是无限的。

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

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

CSS 带帧阻止的动画 :hover

CSS animation with frame prevent :hover

html

css

animation

frame

hover