CSS 动画不适用于 Safari 最新版本

Question

我正在尝试查找与 Safari 的兼容性问题，但在 CSS 故障文本动画中无济于事，所有关键帧都已打开，并且每个属性都指定了动画，我剪切了中间关键帧以使其更简单：

.glitch {

   animation-name: glitch-skew;
 animation-duration: 1s;
 animation-direction: alternate-reverse;
  animation-iteration-count: infinite;
 animation-timing-function: linear;
 animation-fill-mode: forwards;
 animation-delay: 0s;
}
.glitch::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  left: 3px;
  text-shadow: -3px 0 #ff00c1;
 animation-name: glitch-anim;
 animation-duration: 6s;
 animation-direction: alternate-reverse;
  animation-iteration-count: infinite;
 animation-timing-function: linear;
 animation-fill-mode: forwards;
 animation-delay: 0s;
}
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  left: -3px;
  text-shadow: -3px 0 #00fff9, 3px 3px #ff00c1;
   animation-name: glitch-anim2;
 animation-duration: 1.5s;
  animation-iteration-count: infinite;
 animation-direction: alternate-reverse;
 animation-timing-function: linear;
 animation-fill-mode: forwards;
 animation-delay: 0s;
}


@keyframes glitch-anim {
  0% {
    clip: rect(79px, 9999px, 90px, 0);
    transform: skew(0.57deg);
  }
  5% {
    clip: rect(4px, 9999px, 59px, 0);
    transform: skew(0.73deg);
  }

  100% {
    clip: rect(40px, 9999px, 94px, 0);
    transform: skew(0.6deg);
  }
}
@keyframes glitch-anim2 {
  0% {
    clip: rect(96px, 9999px, 50px, 0);
    transform: skew(0.7deg);
  }
  5% {
    clip: rect(81px, 9999px, 66px, 0);
    transform: skew(0.38deg);
  }

  100% {
    clip: rect(96px, 9999px, 10px, 0);
    transform: skew(0.08deg);
  }
}
@keyframes glitch-skew {
  0% {
    transform: skew(0deg);
  }
  
  100% {
    transform: skew(0deg);
  }
}

关于这里可能出现的问题有什么想法吗？或者也许有办法只在 Safari 设备上隐藏这个动画？我知道这是一个远射

谢谢

Answer 1

尝试对动画元素使用 -webkit 前缀（例如 -webkit-animation-duration、-webkit-animation-name 等），因为 safari 是一个 webkit 浏览器，将 css 样式定位到其框架应该会产生影响。