伪元素的CSS动画在FF中不起作用

Question

我在Chrome和Safari中测试了此CSS循环-效果很好。 但是动画无法在Firefox和IE中运行。

问题出在哪儿？ 我已经定义了-moz-前缀。 还是应该停止将CSS转换用于伪元素？

/* 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; }
}

Answer 1

您可以尝试添加“ animation-fill-mode：both”以查看内容吗？ 我认为，令人沮丧的是，动画可能已经结束或没有触发。

Answer 2

除非自定义元素<section_2></section_2>在html否则section_2不是有效的选择器？

section_2是元素的class ，是否缺失. .section_2 ？或id缺少的元素# #section_2 ？