CSS 动画在 Firefox 和 IE 中不起作用

Question

动画标题图像在 Firefox 和 IE 中不起作用，而在 chrome 中则不是问题。我在动画 CSS 中添加了 -moz-。 http://ayhumaeni.com/

#headerimg{
    text-align: center;
    height: 500px;
    width: 100%;
    position: relative;
    margin-bottom: 15px;
    background: url(images/1.jpg) no-repeat;
    background-size: cover;
    -webkit-animation: imag 25s linear 0s infinite alternate running;
    -moz-animation: imag 25s linear 0s infinite alternate running;
    animation: imag 25s linear 0s infinite alternate running;
    -webkit-transition: height 1s ;
    -moz-transition: height 1s ;
    transition: height 1s ;
}

还有这个动画

@keyframes imag {
    0% { background: url(images/1.jpg) no-repeat center center fixed; background-size: cover; }
    20% { background: url(images/2.jpg) no-repeat center center fixed; background-size: cover; }
    40% { background: url(images/3.jpg) no-repeat center center fixed; background-size: cover; }
    60% { background: url(images/4.jpg) no-repeat center center fixed; background-size: cover; }
    80% { background: url(images/5.jpg) no-repeat center center fixed; background-size: cover; }
    100% { background: url(images/6.jpg) no-repeat center center fixed; background-size: cover; }
}
@-webkit-keyframes imag {
    0% { background: url(images/1.jpg) no-repeat center center fixed; background-size: cover; }
    20% { background: url(images/2.jpg) no-repeat center center fixed; background-size: cover; }
    40% { background: url(images/3.jpg) no-repeat center center fixed; background-size: cover; }
    60% { background: url(images/4.jpg) no-repeat center center fixed; background-size: cover; }
    80% { background: url(images/5.jpg) no-repeat center center fixed; background-size: cover; }
    100% { background: url(images/6.jpg) no-repeat center center fixed; background-size: cover; }
}
@-moz-keyframes imag {
    0% { background: url(images/1.jpg) no-repeat center center fixed; background-size: cover; }
    20% { background: url(images/2.jpg) no-repeat center center fixed; background-size: cover; }
    40% { background: url(images/3.jpg) no-repeat center center fixed; background-size: cover; }
    60% { background: url(images/4.jpg) no-repeat center center fixed; background-size: cover; }
    80% { background: url(images/5.jpg) no-repeat center center fixed; background-size: cover; }
    100% { background: url(images/6.jpg) no-repeat center center fixed; background-size: cover; }
}

先谢谢了:)

Answer 1

似乎Firefox和IE11都不喜欢animation-play-state在简写 animation 中定义属性(property)。您已将它放在速记语法的正确位置，所以这是一种奇怪的行为。

幸运的是，running 值是默认值，因此您可以将其删除。如果你确实想改变默认的播放状态，你可以将它定义为一个单独的属性:animation-play-state: running;这很好用。

背景颜色的工作示例

已在 Chrome、Firefox 和 IE11 中测试。

请注意，背景图像 之间的过渡不能设置为动画；他们只会从一个图像跳到另一个图像。如果需要，它们可以使用 opacity 淡入/淡出。

There doesn't seem to be a need to prefix the animation properties for Firefox anymore.

#headerimg {
  text-align: center;
  height: 500px;
  width: 100%;
  position: relative;
  margin-bottom: 15px;
  background: #F00;
  background-size: cover;
  -webkit-animation: imag 5s linear 0s infinite alternate;
  animation: imag 5s linear 0s infinite alternate;
  transition: height 1s;
}
@-webkit-keyframes imag {
  0% {
    background: #FF0;
  }
  20% {
    background: #F90;
  }
  40% {
    background: #F80;
  }
  60% {
    background: #F06;
  }
  80% {
    background: #F50;
  }
  100% {
    background: #F90;
  }
}
@keyframes imag {
  0% {
    background: #FF0;
  }
  20% {
    background: #F90;
  }
  40% {
    background: #F80;
  }
  60% {
    background: #F06;
  }
  80% {
    background: #F50;
  }
  100% {
    background: #F90;
  }
}

<div id="headerimg"></div>