我设置了一个动画:before
,可以在Chrome上正常运行,但不能在Safari(IOS9 iPhone或9-El Capitan)上运行,也不能在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的答案是正确的。
为了避免在CSS上发生太多重复,我将@for
SCSS与A一起使用以遍历所有可用范围(在本例中为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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句