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

Question

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> 

Answer 1

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>