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 влияют вычисленные значения свойств во время выполнения анимации, вычисленное значение свойства является управляемый анимацией.Это переопределяет значение, указанное в обычной системе стилизации. Анимация отменяет все обычные правила, но переопределяется важными правилами ». - http://www.w3.org/TR/css3-animations/

После завершения анимации будет активирован .loaderGif: hover, хотя это никогда не будет, потому что анимация бесконечна.

Чтобы устранить проблему, измените код

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