[英]CSS Animation of pseudo-elements is not working in FF
I tested this css loop in Chrome and Safari - works good. 我在Chrome和Safari中测试了此CSS循环-效果很好。 But the animation is not working in Firefox and IE.
但是动画无法在Firefox和IE中运行。
Where is the problem? 问题出在哪儿? I defined the -moz- prefix already.
我已经定义了-moz-前缀。 Or should I stop using css transitions for pseudo-elements?
还是应该停止将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; }
}
Can you try to add "animation-fill-mode: both" to see something. 您可以尝试添加“ animation-fill-mode:both”以查看内容吗? What is hapenning, I think, is that maybe the animation is already over or isn't triggered.
我认为,令人沮丧的是,动画可能已经结束或没有触发。
section_2
is not a valid selector unless custom element <section_2></section_2>
is within html
? 除非自定义元素
<section_2></section_2>
在html
否则section_2
不是有效的选择器?
Is section_2
a class
of an element , missing .
section_2
是元素的class
,是否缺失.
.section_2
?, or an id
of an element missing #
#section_2
? .section_2
?或id
缺少的元素#
#section_2
?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.