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属性中定义的animation-play-state 。 您已将其放置在速记语法的正确位置，因此这是奇怪的行为。

幸运的是， running值是默认值，因此您只需删除它即可。 如果确实要更改默认播放状态，则可以将其定义为单独的属性： animation-play-state: running ; 这很好。

具有背景色的工作示例

已在Chrome，Firefox和IE11中测试。

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

似乎不再需要为Firefox的动画属性添加前缀。

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