Почему моя анимация CSS не работает в Safari? - PullRequest
Новая
       14

Почему моя анимация CSS не работает в Safari?

0 голосов
/ 08 февраля 2019

Я построил эффект сбоя, используя ключевые кадры в CSS.Я добавил -webkit, чтобы убедиться, что он работает в разных браузерах.В Chrome все работает отлично, но когда я запускаю свой сайт в Safari, эффект сбоя не работает.Я просмотрел несколько потоков, включая этот , и проверил эти решения безрезультатно.Я не уверен, почему это не работает, но помощь действительно будет оценена.

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>

1 Ответ

0 голосов
/ 08 февраля 2019

Похоже, что 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>
...