本文介绍了关于“内容:”的CSS动画在Safari和Firefox上不起作用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在:before
上设置了一个动画,该动画在Chrome上可以正常运行,但在Safari(IOS9 iPhone或9-El Capitan)上都不能运行,在Firefox上也不能。
I have an animation set on :before
that works fine on Chrome but it doesn't work on Safari (IOS9 iPhone or 9 - El Capitan) neither on Firefox.
.hey {
color: white;
}
.hey:before {
content: 'Hey \a there';
white-space: pre;
position: absolute;
color: red;
-moz-animation: heyThere 2250ms steps(11); /* for firefox */
-webkit-animation: heyThere 2250ms steps(11); /* for safari, chrome & opera */
}
@keyframes heyThere {
0% {content: "";}
1% {content: "";}
75% {content: "";}
77% {content: "H";}
80% {content: "He";}
83% {content: "Hey";}
85% {content: "Hey ";}
87% {content: "Hey \a t";}
90% {content: "Hey \a th";}
93% {content: "Hey \a the";}
95% {content: "Hey \a ther";}
97% {content: "Hey \a there";}
100% {content: "Hey \a there";}
}
@-moz-keyframes heyThere { /* animation for firefox */
0% {content: "";}
1% {content: "";}
75% {content: "";}
77% {content: "H";}
80% {content: "He";}
83% {content: "Hey";}
85% {content: "Hey ";}
87% {content: "Hey \a t";}
90% {content: "Hey \a th";}
93% {content: "Hey \a the";}
95% {content: "Hey \a ther";}
97% {content: "Hey \a there";}
100% {content: "Hey \a there";}
}
@-webkit-keyframes heyThere { /* animation for chrome, safari & opera */
0% {content: "";}
1% {content: "";}
75% {content: "";}
77% {content: "H";}
80% {content: "He";}
83% {content: "Hey";}
85% {content: "Hey ";}
87% {content: "Hey \a t";}
90% {content: "Hey \a th";}
93% {content: "Hey \a the";}
95% {content: "Hey \a ther";}
97% {content: "Hey \a there";}
100% {content: "Hey \a there";}
}
<div class="hey">Hey there</div>
推荐答案
@asimovwasright答案是正确的。
@asimovwasright answer is right.
为了避免在CSS上重复很多,我使用了 @for
使用SCSS循环遍历所有可用范围(在这种情况下为8)
To avoid so much repetition on css, I used a @for
with SCSS to loop through all available spans (in this case 8)
.hey {
span {
color: transparent;
animation: heyThere 500ms ease-out;
animation-fill-mode: forwards;
$chars: 8;
@for $i from 1 through $chars {
&:nth-of-type(#{$i}) {
animation-delay: 1200+70ms*$i;
}
}
}
}
HTML:
<h2 class="hey">
<span>H</span>
<span>e</span>
<span>y</span>
<br>
<span>t</span>
<span>h</span>
<span>e</span>
<span>r</span>
<span>e</span>
</h2>
这篇关于关于“内容:”的CSS动画在Safari和Firefox上不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!