CSS动画无法在Firefox和IE中运行

Question

当Chrome中没有问题时，

动画标题图像在Firefox和IE中不起作用。我在动画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。你已经把它放在了正确的位置以便用于速记语法，所以这很奇怪。

幸运的是，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.

＆＃13;

＆＃13;

#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;
  }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;