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

【问题标题】：CSS Animation of pseudo-elements is not working in FF伪元素的 CSS 动画在 FF 中不起作用
【发布时间】：2015-11-18 10:22:03
【问题描述】：

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

【问题讨论】：

请您也分享您的 HTML 标记
我在 ie 中的动画也有问题...
我试图创建一个小提琴，但我认为这是一个更好的方法：link
我使用了来自 codyhouse 的一个很好的例子，并在您打开该部分时添加了一个褪色的背景。就是不行。 2 当前是动画。

标签： javascript css loops animation

【解决方案1】：

您可以尝试添加“动画填充模式：两者”来查看某些内容。我认为正在发生的事情是动画可能已经结束或没有被触发。

【讨论】：

你的意思是#section_2.cd-single-project.is-loaded.is-full-width:after { animation-fill-mode: both; -webkit-animation-fill-mode：两者； ... }
抱歉，没有结果

【解决方案2】：

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

section_2 是一个元素的class，缺少. .section_2 吗？还是缺少##section_2 的元素的id？

【讨论】：

哦抱歉，这是一个 id "#section_2"
@ThomasKu "it's a id "#section_2"" 调整选择器是否返回预期结果？
这只是我的问题中的一个错字。该部门有效且工作正常。动画在 chrome + safari 中触发。
@ThomasKu 尝试将position、display 属性添加到:after 伪元素
我在 FF 中添加了 position + display 没有效果。这是该项目的链接。也许这会帮助你更好地理解它link