css animation on “content:” doesn't work on Safari and Firefox

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.

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

  H
  e
  y 
  T
  h
  e
  r
  e