时间戳

首页 > 解决方案 > CSS 动画关键帧现在可以在 Safari 上使用

css - CSS 动画关键帧现在可以在 Safari 上使用

问题描述

关键帧动画在 Chrome 和 Mozilla 上完美运行，但在 Safari 和 iPhone 上却无法运行。

如何让它在 Safari 上运行？

.headline-placeholder::before {
  font-size: 60px;
  content: "";
  animation: changingText 7s ease-in infinite;

  background: #12c2e9; /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to right,
    #f64f59,
    #c471ed,
    #12c2e9
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to right,
    #f64f59,
    #c471ed,
    #12c2e9
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* background: -webkit-linear-gradient(#eee, #333); */
}

@keyframes changingText {
  0%,
  100% {
    content: "internship";
  }
  75% {
    content: "graduate job";
  }
}

标签： csscss-animationskeyframe

解决方案

推荐阅读