关键帧动画在 iPhone 上不起作用
Posted
技术标签:
【中文标题】关键帧动画在 iPhone 上不起作用【英文标题】：Keyframe Animation not working on iPhone 【发布时间】：2017-11-14 00:21:26 【问题描述】：所以我想在我的网站上播放一个动画：http://eayusi.design
无论我使用什么浏览器，它似乎都无法在我的 iPhone 上运行。我已经按照其他答案的建议在动画之前添加了 -webkit- ，但这似乎不起作用。我会很感激我能得到的任何帮助。我目前在最新的 ios 上使用 iPhone 6。
html
font-size: 62.5%;
body
margin: 0;
padding: 0;
font-size: 1.6rem;
background: black;
text-align: center;
letter-spacing: 20px;
font-family: 'Raleway', sans-serif;
font-weight: 900;
.glitch
position:relative;
top: 40%;
color: white;
.glitch:before, .glitch:after
content: 'Coming soon';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background:black;
.glitch:before
left: 4px;
text-shadow: 2px 0 #00ffea;
animation: effect 3s infinite linear;
-webkit-animation: effect 3s infinite linear;
clip: rect(45px, 9999px, 38px, 0);
.glitch:after
left: -2px;
text-shadow: -2px 0 tomato;
animation: effect 2s infinite linear;
-webkit-animation: effect 2s infinite linear;
@keyframes effect
0%
clip: rect(42px, 9999px, 44px, 0);
5%
clip: rect(12px, 9999px, 59px, 0);
10%
clip: rect(48px, 9999px, 29px, 0);
15.0%
clip: rect(42px, 9999px, 73px, 0);
20%
clip: rect(63px, 9999px, 27px, 0);
25%
clip: rect(34px, 9999px, 55px, 0);
30.0%
clip: rect(86px, 9999px, 73px, 0);
35%
clip: rect(20px, 9999px, 20px, 0);
40%
clip: rect(26px, 9999px, 60px, 0);
45%
clip: rect(25px, 9999px, 66px, 0);
50%
clip: rect(57px, 9999px, 98px, 0);
55.0%
clip: rect(5px, 9999px, 46px, 0);
60.0%
clip: rect(82px, 9999px, 31px, 0);
65%
clip: rect(54px, 9999px, 27px, 0);
70%
clip: rect(28px, 9999px, 99px, 0);
75%
clip: rect(45px, 9999px, 69px, 0);
80%
clip: rect(23px, 9999px, 85px, 0);
85.0%
clip: rect(54px, 9999px, 84px, 0);
90%
clip: rect(45px, 9999px, 47px, 0);
95%
clip: rect(37px, 9999px, 20px, 0);
100%
clip: rect(4px, 9999px, 91px, 0);
@-webkit-keyframes effect
0%
clip: rect(42px, 9999px, 44px, 0);
5%
clip: rect(12px, 9999px, 59px, 0);
10%
clip: rect(48px, 9999px, 29px, 0);
15.0%
clip: rect(42px, 9999px, 73px, 0);
20%
clip: rect(63px, 9999px, 27px, 0);
25%
clip: rect(34px, 9999px, 55px, 0);
30.0%
clip: rect(86px, 9999px, 73px, 0);
35%
clip: rect(20px, 9999px, 20px, 0);
40%
clip: rect(26px, 9999px, 60px, 0);
45%
clip: rect(25px, 9999px, 66px, 0);
50%
clip: rect(57px, 9999px, 98px, 0);
55.0%
clip: rect(5px, 9999px, 46px, 0);
60.0%
clip: rect(82px, 9999px, 31px, 0);
65%
clip: rect(54px, 9999px, 27px, 0);
70%
clip: rect(28px, 9999px, 99px, 0);
75%
clip: rect(45px, 9999px, 69px, 0);
80%
clip: rect(23px, 9999px, 85px, 0);
85.0%
clip: rect(54px, 9999px, 84px, 0);
90%
clip: rect(45px, 9999px, 47px, 0);
95%
clip: rect(37px, 9999px, 20px, 0);
100%
clip: rect(4px, 9999px, 91px, 0);
</style>
</head>
<body>
<h1 class="glitch">Coming soon</h1>
</body>
</html>
【问题讨论】：
【参考方案1】：我能够通过以下内容使其在移动设备上运行：
.glitch:before, .glitch:after
clip: rect(0,0,0,0);
Here 是一个演示它在移动设备上工作的 Codepen。我在 Codepen 中还进行了一些其他更改，但这是使其正常工作的更改。
我正在根据 CSS-Tricks 中的 another post 修改您的代码，他们通过 SASS 使其工作。老实说，我不确定它为什么会起作用，因为我没有丰富的剪辑或蒙版经验，但确实如此。
编辑：另请注意，clip 属性已被贬值。因此，寻找一个在 SVG 内部元素上使用剪辑路径的替代实现可能是值得的。当我找到一些额外的空闲时间时，我会看看是否可以创建一个示例。
【讨论】：
非常感谢！是的，我也看到了那篇文章，我最终完全避免了它，因为我从未使用过 SASS。但是非常感谢你，我还有很多东西要学。 当然！就像一个注释一样，将最准确的答案标记为已接受的答案是一种常见的礼貌。此外，一旦您熟悉了 CSS 工作，就完全值得一试 SASS/LESS 和其他 CSS 预处理器。它们在组织大型项目和生成大量重复代码方面有很大帮助。以上是关于关键帧动画在 iPhone 上不起作用的主要内容，如果未能解决你的问题，请参考以下文章