为什么我的CSS动画无法在Safari工作？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了为什么我的CSS动画无法在Safari工作？相关的知识，希望对你有一定的参考价值。
我已经建立了使用关键帧在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>答案
看来，Safari浏览器，从而让它接受它作为动画的价值有一个初步的qazxsw POI规则...
clipheader
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);
以上是关于为什么我的CSS动画无法在Safari工作？的主要内容，如果未能解决你的问题，请参考以下文章
如何使 CSS 属性动画在 Safari 中像在 Google Chrome 中一样工作？