如何使关键帧在Safari和Mobile上工作？

Question

我具有以下div和样式，这些样式和样式适用于桌面chrome，但不适用于Safari或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';
  }
}