Проблемы с keyframes , не работает в -moz-

487

24 ноября 2016, 10:14

Не работает animation в Firefox , а в других работает

* { 
  margin: 0; 
  padding: 0; 
} 
.mo img { 
  display: block; 
  width: 100%; 
  height: 100%; 
} 
.mo { 
  width: 400px; 
  height: 400px; 
  position: relative; 
  margin: 20px auto; 
} 
.fon { 
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  animation: dinamic 1s infinite steps(4); 
 -webkit-animation: dinamic 1s infinite steps(4); 
 -moz-animation: dinamic 1s infinite steps(4); 
} 
@-webkit-keyframes dinamic { 
  0% { 
    background: url(http://maxim1978.0fees.us/images/1.png); 
    background-size: cover; 
  } 
  25% { 
    background: url(http://maxim1978.0fees.us/images/2.png); 
    background-size: cover; 
  } 
  50% { 
    background: url(http://maxim1978.0fees.us/images/3.png); 
    background-size: cover; 
  } 
  75% { 
    background: url(http://maxim1978.0fees.us/images/4.png); 
    background-size: cover; 
  } 
} 
@-moz-keyframes dinamic { 
  0% { 
    background: url(http://maxim1978.0fees.us/images/1.png); 
    background-size: cover; 
  } 
  25% { 
    background: url(http://maxim1978.0fees.us/images/2.png); 
    background-size: cover; 
  } 
  50% { 
    background: url(http://maxim1978.0fees.us/images/3.png); 
    background-size: cover; 
  } 
  75% { 
    background: url(http://maxim1978.0fees.us/images/4.png); 
    background-size: cover; 
  } 
} 
@keyframes dinamic { 
  0% { 
    background: url(http://maxim1978.0fees.us/images/1.png); 
    background-size: cover; 
  } 
  25% { 
    background: url(http://maxim1978.0fees.us/images/2.png); 
    background-size: cover; 
  } 
  50% { 
    background: url(http://maxim1978.0fees.us/images/3.png); 
    background-size: cover; 
  } 
  75% { 
    background: url(http://maxim1978.0fees.us/images/4.png); 
    background-size: cover; 
  } 
} 
@-o-keyframes dinamic { 
  0% { 
    background: url(http://maxim1978.0fees.us/images/1.png); 
    background-size: cover; 
  } 
  25% { 
    background: url(http://maxim1978.0fees.us/images/2.png); 
    background-size: cover; 
  } 
  50% { 
    background: url(http://maxim1978.0fees.us/images/3.png); 
    background-size: cover; 
  } 
  75% { 
    background: url(http://maxim1978.0fees.us/images/4.png); 
    background-size: cover; 
  } 
}

<div class="mo"> 
  <img src="http://maxim1978.0fees.us/images/bg.png" alt=""> 
  <div class="fon"></div> 
</div>

Этот пример в песочнице

Answer 1

В фаерфоксе/IE анимация свойства background-image не работает. Я рекомендую вам склеить эти изображения в одно и анимировать свойство background-position, а не background-image. Также придется избавиться от background-size: cover.

Примерно код будет выглядеть вот так, CSS:

@keyframes bg-animation {
  from { background-position: 0 0; }
  to { background-position: 100% 0; }
}

HTML:

.fon {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url(full-image.png);
  animation: dinamic 1s infinite steps(4);
}