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

#css #анимация

Не работает 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;
  }
}

  
  






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

Ответы

Ответ 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);
}