css animation on “content:” doesn't work on Sa

Question

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>

Answer 1

As mentioned by @Pavan Kumar Jorrigala it is not possible to animate the content property of a pseudo element except in Chrome on desktop.

Here is an ass-backwards approach to what you are trying to achieve:

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>

Answer 2

Try adding a display property to the :before. For example, add display:block; and see if that affects the animation.

Answer 3

I also gone through the entire web I didn't found any thing, according to the following reference we can only achieve with 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

Answer 4

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

Answer 5

in safari and firefox the code isn't animation, instead you'll have to write -moz-animation and also -webkit-animation, like this code:

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

`