Как заставить ключевые кадры работать в Safari и на мобильных устройствах?

Question

У меня есть следующие div и стили, которые отлично работают для настольного Chrome, но не работают в сафари или в браузерах iOS. Я также использую загрузчик 4.

Почему это не работает в Safari / iOS?

index.html:

<h2 id="headline">My dog likes to eat <span class="animate" ></span>.</h2>

custom.css:

#headline span:after {
  content: 'burgers with cheese';
  -webkit-animation: 8s animate infinite ease-in-out;
  text-color: white;
}

@-webkit-keyframes animate {
  0% {
    content: 'fish and chips';
  }
  25% {
    content: 'a ceasar salad';
  }
  50% {
    content: 'strawberrys and cream';
  }
  75% {
    content: 'scrambled eggs';
  }
  100% {
    content: 'roast beef';
  }
}