Как анимировать в Safari, используя CSS?

Question

У меня проблема. Safari не хочет нормально работать с моей анимацией. Он ничего не говорит и ничего не показывает. В Google Chrome он отлично работает, но не в 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>

Мне нужна ваша помощь!

Answer 1

Вам также нужно использовать @webkit-keyframes animate {}.

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

}

Answer 2

Вы используете @keyframes animate {}, для совместимости с Safari 4.0-8.0 вам необходимо использовать @-webkit-keyframes example {} вместе с @keyframes animate {}