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

【问题标题】：How to animate in Safari using CSS?如何使用 CSS 在 Safari 中制作动画？
【发布时间】：2020-05-14 05:37:48
【问题描述】：

我有问题。 Safari 不想在我的动画上正常工作。它什么也没说，什么也不显示。在谷歌浏览器中它工作得很好，但在 Safari 中却不行。这是我的 HTML 代码：

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

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

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

我需要你的帮助！

【问题讨论】：

什么版本的 Safari？

标签： html css animation safari webkit

【解决方案1】：

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

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

}

【讨论】：

其实我在用@-webkit-keyframes，但是还是不行，对不起，我的错。
你能不能尝试在你的css中使用-webkit-animation: animate而不是“animation-name”。所谓的：动画：动画和-webkit-动画：动画。也许只是为了确定，给你的动画一个不同的名字而不是动画。
感谢您的回答，但即使那样它也不想工作。
也许这是问题所在：stackoverflow.com/a/40083297/6691092 css-tricks.com/animating-the-content-property/…

【解决方案2】：

您使用的是@keyframes animate {}，为了与Safari 4.0-8.0 兼容，您需要同时使用@-webkit-keyframes example {} 和@keyframes animate {}

【讨论】：

其实我在用@-webkit-feyframes 也用@keyframes，但是还是不行，对不起，我的错。