CODEWITHSUNDEEP
htmlcsscss-animationskeyframe
NasyaAS
NasyaAS

Reputation: 249

Why won't my css animations not work in Safari?

I have built a glitch effect using keyframes in css. I have added -webkit to make sure it works on different browsers. Everything works perfectly in Chrome but when I run my site on Safari the glitch effect does not work. I have looked at several threads including this one and tested these solutions to no avail. I am not sure why this isn't working but help would really be appreciated. 

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>

Upvotes: 0

Views: 293

Answers (1)

Kaiido
Kaiido

Reputation: 136638

It seems that Safari needs to have an intial clip rule so that it accepts it as an animatable value...

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>

Upvotes: 1

Related Questions