时间戳

首页 > 解决方案 > 动画左偏移不适用于野生动物园

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

问题描述

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

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

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

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

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

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

这是一个工作和非工作视频示例。

这是在以下情况下测试的：

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 上进行测试并分享结果。

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

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

标签： cssanimationsafaricss-animations

解决方案

我也有这个问题，iOS 15.1 似乎解决了它，但你可以尝试用变换替换动画。

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

推荐阅读