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

我在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; }
}

你可以尝试添加“动画填充模式：两者”来查看一些内容吗。

---

我认为，可能是动画已经结束或没有触发。

节2

不是有效的选择器，除非自定义元素

在

html

中

---

是否元素的

节\u 2

a

类
，缺少
。节\u 2
？，或者缺少
#
的元素的
id
的
#section_2
？
你也可以分享你的HTML标记吗？我在ie中对动画也有问题…我试图创建一个小提琴，但我认为这是一个更好的方法：我使用了codyhouse的一个非常好的例子，在打开该部分时添加了一个褪色的背景。刚才第二个是动画。哦，对不起，这是一个id“#section_2”@ThomasKu”这是一个id“#section_2”调整选择器是否返回预期结果？这只是我这里的问题中的一个输入错误。该部门是有效的工程罚款。动画在chrome+safari中触发。@ThomasKu尝试将
位置
，
显示
属性添加到
：在
伪元素之后，我添加了
位置
+
显示
在FF中没有效果。这是该项目的链接。也许这会帮助您更好地理解它。您的意思是#section_2.cd single project.已加载。是全宽：在{animation fill mode:tweet；-webkit animation fill mode:tweet；…}之后。抱歉，根本没有结果