Css 文本动画在Safari中不起作用

我的网站上有一个文本微调器/旋转器

链接：

问题是，在我的IPhone上，它不工作，我看到的不是旋转的单词，而是空白。 编辑：我发现它一般不适用于Safari（也适用于浏览器）

我搞不懂怎么回事

代码如下：

<p class="slogan">Je <span id="spin"></span> <br />van betekenis.</p>

---

当我把-webkit-放在“内容”前面时，它可能会重复，但它也不起作用。。

#spin:after {
  content:"";
  animation: spin 10s linear infinite;
  -webkit-animation: spin 10s linear infinite; /* Safari 4+ */
  -moz-animation: spin 10s linear infinite; /* Fx 5+ */
  -o-animation: spin 10s linear infinite; /* Opera 12+ */
  animation: spin 10s linear infinite; /* IE 10+ */
}
@keyframes spin {
  0% { content:"merk"; }
  50% { content:"missie"; }
  100% { content:"verhaal"; }
}
@-webkit-keyframes spin {
  0% { content:"merk"; }
  50% { content:"missie"; }
  100% { content:"verhaal"; }
}