文本动画在 iOS 浏览器上不起作用

【问题标题】：Text animation not working on iOS browsers文本动画在 iOS 浏览器上不起作用
【发布时间】：2020-11-09 14:19:38
【问题描述】：

文本动画在 iOS 浏览器上不起作用。我已经为文本动画编写了这个简单的代码，它可以在 android 浏览器上运行，但不能在 iOS 上运行。

!DOCTYPE html>
<html>
<head>
<style>
h2{
font-size: 45px;
}
span:before {
content:'';
animation-name: example;
animation-duration: 8s;
animation-iteration-count: infinite;
}

@keyframes example {
0%{
content:'mirror';
}
40%{
content:'catalyst';
}
80%{
content:'disruptor';
}
100%{
content:'partner';
}
}
</style>
</head>
<body>
<div><h2> I am your <span></span>.</div>
</body>
</html>

【问题讨论】：

标签： javascript html ios

【解决方案1】：

Chrome、Edge、Mozilla 和 Safari 使用不同的渲染引擎来渲染图形、动画等。在您的案例中出现的问题是您没有使用 Safari 的渲染引擎 webkit。而不是

animation-name: example;
animation-duration: 8s;
animation-iteration-count: infinite;

做

-webkit-animation-name: example;
-webkit-animation-duration: 8s;
-webkit-animation-iteration-count: infinite;

注意：只是一个建议，不要使用三行代码来声明动画，最好使用动画速记属性。如果你对 CSS 动画感兴趣，可以访问我的blog。

编码愉快！！

【讨论】：

如果这解决了你的问题，你可以接受这个作为答案。