文本动画在 iOS 浏览器上不起作用
Posted
技术标签:
【中文标题】文本动画在 iOS 浏览器上不起作用【英文标题】：Text animation not working on iOS browsers 【发布时间】：2020-11-09 14:19:38 【问题描述】：。我已经为文本动画编写了这个简单的代码，它可以在 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>【问题讨论】：
【参考方案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。
编码愉快！！
【讨论】：
如果这解决了你的问题，你可以接受这个作为答案。以上是关于文本动画在 iOS 浏览器上不起作用的主要内容，如果未能解决你的问题，请参考以下文章
设置 UIBarButtonItem 动画在 iOS 11 上不起作用
transform：翻译动画在 iOS 15.1 设备上不起作用