Question

我已经使用CSS中的关键帧建立了毛刺效果。我添加了-webkit以确保它可以在不同的浏览器上运行。一切都可以在Chrome中完美运行，但是当我在Safari上运行网站时，故障效果不起作用。我查看了包括this one在内的多个线程，并测试了这些解决方案，但均无济于事。我不确定为什么这行不通，但我们将不胜感激。

header {
  width: 100%;
  margin-bottom: 100px !important;
  padding: 0px;
  margin: 0px;
}

.glitch {
  position: relative;
  font-family: "Raleway", sans-serif;
  font-weight: 500;
  color: black;
  font-size: 16em;
  padding-top: 312px;
  text-align: center;
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 312.5px;
  left: 0;
  width: 100%;
  height: 50%;
}

.glitch::before {
  left: 5px;
  text-shadow: -1.75px 0 red !important;
  background: white;
  -webkit-animation-name: glitch-anim-1;
  -webkit-animation-duration: 1.89s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -webkit-animation-fill-mode: alternate-reverse;
  animation-name: glitch-anim-1;
  animation-duration: 1.89s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-fill-mode: alternate-reverse;
}

.glitch::after {
  left: -10px;
  text-shadow: -1.75px 0 rgb(89, 0, 255);
  background: white;
  -webkit-animation-name: glitch-anim-2;
  -webkit-animation-duration: 1.89s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -webkit-animation-fill-mode: alternate-reverse;
  animation-name: glitch-anim-2;
  animation-duration: 1.89s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-fill-mode: alternate-reverse;
}

@-webkit-keyframes glitch-anim-1 {
  0% {
    clip: rect(100px, 1500px, 150px, 0);
  }
  10% {
    clip: rect(50px, 1500px, 25px, 0);
  }
  20% {
    clip: rect(50px, 1500px, 25px, 0);
  }
  30% {
    clip: rect(50px, 1500px, 400px, 0);
  }
  40% {
    clip: rect(600px, 1500px, 50px, 0);
  }
  50% {
    clip: rect(300px, 1500px, 65px, 0);
  }
  60% {
    clip: rect(100px, 1500px, 150px, 0);
  }
  70% {
    clip: rect(50px, 1500px, 25px, 0);
  }
  80% {
    clip: rect(200px, 1500px, 30px, 0);
  }
  90% {
    clip: rect(600px, 1500px, 50px, 0);
  }
  100% {
    clip: rect(600px, 1500px, 50px, 0);
  }
}

@keyframes glitch-anim-1 {
  0% {
    clip: rect(100px, 1500px, 150px, 0);
  }
  10% {
    clip: rect(50px, 1500px, 25px, 0);
  }
  20% {
    clip: rect(50px, 1500px, 25px, 0);
  }
  30% {
    clip: rect(50px, 1500px, 400px, 0);
  }
  40% {
    clip: rect(600px, 1500px, 50px, 0);
  }
  50% {
    clip: rect(300px, 1500px, 65px, 0);
  }
  60% {
    clip: rect(100px, 1500px, 150px, 0);
  }
  70% {
    clip: rect(50px, 1500px, 25px, 0);
  }
  80% {
    clip: rect(200px, 1500px, 30px, 0);
  }
  90% {
    clip: rect(600px, 1500px, 50px, 0);
  }
  100% {
    clip: rect(600px, 1500px, 50px, 0);
  }
}

@-webkit-keyframes glitch-anim-2 {
  0% {
    clip: rect(100px, 1500px, 150px, 0);
  }
  10% {
    clip: rect(50px, 1500px, 25px, 0);
  }
  20% {
    clip: rect(50px, 1500px, 25px, 0);
  }
  30% {
    clip: rect(50px, 1500px, 400px, 0);
  }
  40% {
    clip: rect(600px, 1500px, 50px, 0);
  }
  50% {
    clip: rect(300px, 1500px, 65px, 0);
  }
  60% {
    clip: rect(100px, 1500px, 150px, 0);
  }
  70% {
    clip: rect(50px, 1500px, 25px, 0);
  }
  80% {
    clip: rect(200px, 1500px, 30px, 0);
  }
  90% {
    clip: rect(600px, 1500px, 50px, 0);
  }
  100% {
    clip: rect(600px, 1500px, 50px, 0);
  }
}

@keyframes glitch-anim-2 {
  0% {
    clip: rect(100px, 1500px, 150px, 0);
  }
  10% {
    clip: rect(50px, 1500px, 25px, 0);
  }
  20% {
    clip: rect(50px, 1500px, 25px, 0);
  }
  30% {
    clip: rect(50px, 1500px, 400px, 0);
  }
  40% {
    clip: rect(600px, 1500px, 50px, 0);
  }
  50% {
    clip: rect(300px, 1500px, 65px, 0);
  }
  60% {
    clip: rect(100px, 1500px, 150px, 0);
  }
  70% {
    clip: rect(50px, 1500px, 25px, 0);
  }
  80% {
    clip: rect(200px, 1500px, 30px, 0);
  }
  90% {
    clip: rect(600px, 1500px, 50px, 0);
  }
  100% {
    clip: rect(600px, 1500px, 50px, 0);
  }
}

<div id="msg"></div>
<header>
  <div class="glitch" data-text="WELCOME">WELCOME</div>
  <i class="arrow fas fa-angle-double-down"></i>
</header>

Answer 1

似乎Safari需要有一个初始clip规则，以便它将其接受为可设置动画的值...

header {
  width: 100%;
  margin-bottom: 100px !important;
  padding: 0px;
  margin: 0px;
}

.glitch {
  position: relative;
  font-family: "Raleway", sans-serif;
  font-weight: 500;
  color: black;
  font-size: 16em;
  padding-top: 312px;
  text-align: center;
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 312.5px;
  left: 0;
  width: 100%;
  height: 50%;
}

.glitch::before {
  /* set an initial value for Safari */
  clip: rect(100px, 1500px, 150px, 0);
  left: 5px;
  text-shadow: -1.75px 0 red !important;
  background: white;
  animation-name: glitch-anim-1;
  animation-duration: 1.89s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  /* note: animation-direction can have alternate-reverse, not fill-mode */
  animation-direction: alternate-reverse;
  animation-fill-mode: both;
}

.glitch::after {
  /* set an initial value for Safari */
  clip: rect(100px, 1500px, 150px, 0);
  left: -10px;
  text-shadow: -1.75px 0 rgb(89, 0, 255);
  background: white;
  animation-name: glitch-anim-2;
  animation-duration: 1.89s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  /* note: animation-direction can have alternate-reverse, not fill-mode */
  animation-direction: alternate-reverse;
  animation-fill-mode: both;
}
/* note: unprefixed keyframes is supported since years */
@keyframes glitch-anim-1 {
  0% {
    clip: rect(100px, 1500px, 150px, 0);
  }
  10% {
    clip: rect(50px, 1500px, 25px, 0);
  }
  20% {
    clip: rect(50px, 1500px, 25px, 0);
  }
  30% {
    clip: rect(50px, 1500px, 400px, 0);
  }
  40% {
    clip: rect(600px, 1500px, 50px, 0);
  }
  50% {
    clip: rect(300px, 1500px, 65px, 0);
  }
  60% {
    clip: rect(100px, 1500px, 150px, 0);
  }
  70% {
    clip: rect(50px, 1500px, 25px, 0);
  }
  80% {
    clip: rect(200px, 1500px, 30px, 0);
  }
  90% {
    clip: rect(600px, 1500px, 50px, 0);
  }
  100% {
    clip: rect(600px, 1500px, 50px, 0);
  }
}

@keyframes glitch-anim-2 {
  0% {
    clip: rect(100px, 1500px, 150px, 0);
  }
  10% {
    clip: rect(50px, 1500px, 25px, 0);
  }
  20% {
    clip: rect(50px, 1500px, 25px, 0);
  }
  30% {
    clip: rect(50px, 1500px, 400px, 0);
  }
  40% {
    clip: rect(600px, 1500px, 50px, 0);
  }
  50% {
    clip: rect(300px, 1500px, 65px, 0);
  }
  60% {
    clip: rect(100px, 1500px, 150px, 0);
  }
  70% {
    clip: rect(50px, 1500px, 25px, 0);
  }
  80% {
    clip: rect(200px, 1500px, 30px, 0);
  }
  90% {
    clip: rect(600px, 1500px, 50px, 0);
  }
  100% {
    clip: rect(600px, 1500px, 50px, 0);
  }
}

<div id="msg"></div>
<header>
  <div class="glitch" data-text="WELCOME">WELCOME</div>
  <i class="arrow fas fa-angle-double-down"></i>
</header>

为什么CSS动画无法在Safari中运行？

1 个答案: