动画标题图像在 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; }
}
先谢谢了:)
最佳答案
似乎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>
关于CSS 动画在 Firefox 和 IE 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26600552/