css анимация «content:» не работает в 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

@asimovwasright ответ является правильным.

Чтобы избежать так много повторений на CSS, я использовал @for с SCSS перебрать все доступные пролеты (в данном случае 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> 

Answer 2

в сафари и светлячок код не анимация, а вы должны будете написать -moz-анимации, а также -webkit-анимации, как этот код:

.hey { 
    color: white; 
} 
.hey:before { 
    content: 'Hey \a there'; 
    white-space: pre; 
    position: absolute; 
    color: red; 
    animation: heyThere 2250ms steps(11); 
    -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";} 
} 

`

Answer 3

Попробуйте добавить свойство отображения к предыдущему. Например, добавьте display: block; и посмотрите, влияет ли это на анимацию.

Answer 4

Я также просмотрел всю сеть. Я не нашел ничего, согласно следующей ссылке, которую мы можем достичь только с помощью JavaScript.

В моем собственном тестировании анимационный контент работал только на стабильном рабочем столе Chrome (v46 на момент написания статьи). Нет поддержки нигде. Нет Safari на рабочем столе или iOS. Нет Firefox. Нет IE. Каждый из этих браузеров будет игнорировать анимацию, показывая только исходное содержимое в элементе pseudo .

Reference

Answer 5

Как отмечали @Pavan Кумар Jorrigala не представляется возможным, чтобы оживить content свойство псевдо элемента, за исключением Chrome на рабочем столе.

Вот осел-назад подход к тому, что вы пытаетесь достичь:

jsfiddle

.hey span { 
 
    color: transparent; 
 
    animation: heyThere 100ms; 
 
    animation-fill-mode: forwards; 
 
} 
 

 
.hey span:nth-child(1) { 
 
    animation-delay: 100ms; 
 
} 
 
.hey span:nth-child(2) { 
 
    animation-delay: 300ms; 
 
} 
 
.hey span:nth-child(3) { 
 
    animation-delay: 500ms; 
 
} 
 
.hey span:nth-child(4) { 
 
    animation-delay: 700ms; 
 
} 
 
.hey span:nth-child(5) { 
 
    animation-delay: 900ms; 
 
} 
 
.hey span:nth-child(6) { 
 
    animation-delay: 1100ms; 
 
} 
 
.hey span:nth-child(7) { 
 
    animation-delay: 1300ms; 
 
} 
 
.hey span:nth-child(8) { 
 
    animation-delay: 1500ms; 
 
} 
 

 
@keyframes heyThere { 
 
    0% {color: transparent;} 
 
    100% {color: red;} 
 
}

<div class="hey"> 
 
    <span>H</span> 
 
    <span>e</span> 
 
    <span>y&nbsp;</span> 
 
    <span>T</span> 
 
    <span>h</span> 
 
    <span>e</span> 
 
    <span>r</span> 
 
    <span>e</span> 
 
</div>