动画左偏移不适用于野生动物园

Question

我想用打字机动画制作一些文本：

<h2 id="slogan">we make the web.</h2>

它有一些简单的 css 来为它的变换设置动画，并且有一个 ::before psuedo 元素来一个一个地显示字母，也有一个步进动画。

animation: type 2s steps(16) forwards 2200ms;

@keyframes type
{
    to { left: 100%; }
}

这在基于 chromium 的浏览器和 firefox 上完全符合预期。但它在 safari 上的动画效果不正确，看起来它以 2 步而不是 16 步跳跃。

Here 是一个工作和不工作的视频示例。

---

测试于：

Microsoft Edge 91.0.864.48（工作）

谷歌浏览器 91.0.4472.106（工作）

Firefox 88.0.1（工作）

Safari 15.0 (17612.1.15.1.14)（不工作） - 在 macOS Monterey 的第一个开发测试版上测试

Safari iOS（不工作）- 在 iOS 15 的第一个开发测试版上测试

---

我对这个问题可能是由于测试版软件的想法持开放态度，因此希望其他开发人员在不同版本的 safari 上进行测试并分享结果。

如果您知道造成这种情况的原因，我非常感谢您抽出时间来解释此事。

欢迎所有帮助，感谢您的宝贵时间。

Answer 1

我也有这个问题，iOS 15.1 好像解决了，不过你可以试试把动画换成transform。

@keyframes type {
   0% {
     transform: translateX(0);
   }
   100% {
     transform: translateX(-100%);
   }
}