我在 Chrome 和 Safari 中测试了这个 css 循环 - 效果很好。但是动画在 Firefox 和 IE 中不起作用。
问题出在哪里?我已经定义了 -moz- 前缀。 或者我应该停止对伪元素使用 css transitions 吗?
/* fullscreen div */
section_2.cd-single-project.is-loaded.is-full-width:after {
top: 0;
left: 0;
height: 100%;
width: 100%;
/* name */
-webkit-animation-name: fading;
-moz-animation-name: fading;
-ms-animation-name: fading;
-o-animation-name: fading;
animation-name: fading;
/* count */
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
/* duration */
-webkit-animation-duration: 12s;
-moz-animation-duration: 12s;
-ms-animation-duration: 12s;
-o-animation-duration: 12s;
animation-duration: 12s;
}
/* fade safari */
@-webkit-keyframes fading {
0% { background-image:url("1.jpg"); background-repeat: no-repeat;background-position: center center;background-size: cover; }
25% { background-image:url("2.jpg"); background-repeat: no-repeat;background-position: center center;background-size: cover; }
50% { background-image:url("3.jpg"); background-repeat: no-repeat;background-position: center center;background-size: cover; }
}
/* fade firefox */
@-moz-keyframes fading {
0% { background-image:url("1.jpg"); background-repeat: no-repeat;background-position: center center;background-size: cover; }
25% { background-image:url("2.jpg"); background-repeat: no-repeat;background-position: center center;background-size: cover; }
50% { background-image:url("3.jpg"); background-repeat: no-repeat;background-position: center center;background-size: cover; }
}
/* fade opera */
@-o-keyframes fading {
0% { background-image:url("1.jpg"); background-repeat: no-repeat;background-position: center center;background-size: cover; }
25% { background-image:url("2.jpg"); background-repeat: no-repeat;background-position: center center;background-size: cover; }
50% { background-image:url("3.jpg"); background-repeat: no-repeat;background-position: center center;background-size: cover; }
}
/* fade general */
@keyframes fading {
0% { background-image:url("1.jpg"); background-repeat: no-repeat;background-position: center center;background-size: cover; }
25% { background-image:url("2.jpg"); background-repeat: no-repeat;background-position: center center;background-size: cover; }
50% { background-image:url("3.jpg"); background-repeat: no-repeat;background-position: center center;background-size: cover; }
}
最佳答案
您能否尝试添加“animation-fill-mode: both”来查看一些内容。 我认为正在发生的事情是动画可能已经结束或未被触发。
关于javascript - 伪元素的 CSS 动画在 FF 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33777432/