“内容:"上的 css 动画不适用于 Safari 和 Firefox [英] css animation on "content:" doesn't work on Safari and Firefox

问题描述

我在 :before 上设置了一个动画，它在 Chrome 上运行良好，但在 Safari(IOS9 iPhone 或 9 - El Capitan)上不起作用，在 Firefox 上也不行.

.hey {白颜色;}.嘿:之前{content: '嘿\a';空白:预；位置:绝对；红色;-moz-animation: heyThere 2250ms step(11);/* 对于火狐 */-webkit-animation: heyThere 2250ms step(11);/* 用于 safari、chrome 和歌剧*/}@keyframes 嘿嘿{0% {内容:"";}1% {内容:"";}75% {内容:"";}77% {内容:H"；}80% {content: "他";}83% {内容:嘿"；}85% {内容:嘿"；}87% {内容:嘿\a t"；}90% {content: "Hey \a th";}93% {内容:嘿\a"；}95% {content: "Hey \ather";}97% {内容:嘿\a"；}100% {content: "Hey \a there";}}@-moz-keyframes heyThere {/* firefox 动画 */0% {内容:"";}1% {内容:"";}75% {内容:"";}77% {内容:H"；}80% {content: "他";}83% {内容:嘿"；}85% {内容:嘿"；}87% {内容:嘿\a t"；}90% {content: "Hey \a th";}93% {内容:嘿\a"；}95% {content: "Hey \ather";}97% {内容:嘿\a"；}100% {content: "Hey \a there";}}@-webkit-keyframes heyThere {/* chrome, safari & 动画歌剧*/0% {内容:"";}1% {内容:"";}75% {内容:"";}77% {内容:H"；}80% {content: "他";}83% {内容:嘿"；}85% {内容:嘿"；}87% {内容:嘿\a t"；}90% {content: "Hey \a th";}93% {内容:嘿\a"；}95% {content: "Hey \ather";}97% {内容:嘿\a"；}100% {content: "Hey \a there";}}

嘿嘿</div>

解决方案

@asimovwasright 答案是正确的.

为了避免在 css 上出现太多重复，我使用 @for 和 SCSS 来循环遍历所有可用的跨度(在本例中为 8)

.hey {跨度 {颜色:透明；动画:嘿有 500 毫秒缓出；动画填充模式:向前；$字符:8；@for $i 从 1 到 $chars {&:nth-of-type(#{$i}) {动画延迟:1200+70ms*$i；}}}}

还有 HTML:

<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>

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 answer is right.

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

And the 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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！