Question

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

.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);
  }
}

关于这里可能存在什么问题的任何想法？也许有一种方法只能在野生动物园设备上隐藏此动画？我知道它的远景

谢谢

Answer 1

请尝试为动画元素（例如-webkit，-webkit-animation-duration等）使用-webkit-animation-name前缀，因为safari是Webkit浏览器，因此应将CSS样式定位为其框架有影响。

CSS动画仅在Safari最新版本上不起作用

1 个答案: