如何使用CSS在Safari中制作动画？

Question

我有问题。 Safari不想与我的动画配合正常。这是我的HTML代码：

.funny_text:before {
  content: '';
  -webkit-animation-name: animate;
  -webkit-animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
}

@keyframes animate {
  0%,
  34% {
    content: '123';
  }
  35%,
  67% {
    content: '456';
  }
  68%,
  100% {
    content: '789';
  }
}

<p>
  <span class="funny_text">
        </span> .Сайт
</p>

我需要您的帮助！

Answer 1

您正在使用@keyframes animate {}，为了与Safari 4.0-8.0兼容，您需要将@-webkit-keyframes example {}与@keyframes animate {}一起使用

Answer 2

您还需要使用@webkit-keyframes animate {}。

@-webkit-keyframes animate {
0%,34%{
    content: '123';
}
35%,67%{
    content: '456';
}
68%,100%{
    content: '789';
}

}