html - 如何使关键帧在 Safari 和移动设备上工作？

Question

我有以下 div 和样式，它们适用于桌面 chrome，但不适用于 safari 或 iOS 浏览器。我也在使用引导程序 4。

为什么这在 Safari/iOS 中不起作用？

索引.html：

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

自定义.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';
  }
}

标签： htmlioscsssafari