"content:"上的 css 动画在 Safari 和 Firefox 上不起作用

Question

我在 :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>

Answer 1

我也翻遍了全网也没有发现，根据下面的引用我们只能用JavaScript实现。

In my own testing animating content has only worked in stable desktop Chrome (v46 at time of writing). No support anywhere else. No Safari on desktop or iOS. No Firefox. No IE. Each of these browsers will ignore the animation, showing only the original content in the pseudo element.

Reference