为什么我的 CSS3 动画无法在 Safari 中运行？

CSS3 动画在 Safari 中无法正确显示

CSS3 动画通常可以在大多数现代浏览器中无缝运行。但是，您在 Safari 中使用它们时可能会遇到问题，导致缺​​乏移动或渲染不正确。这里演示了一种这样的情况，其中键臂动画无法在 Safari 中正确执行。

问题：CSS3 动画在 Safari 中无法工作

提供的代码包括设计用于旋转元素的 CSS3 动画规则，但 Safari 无法识别此动画。尝试调整屏幕大小会显示该元素在 DOM 中的存在，这表明该元素不是导致问题的 DOM 结构。

Safari 的关键帧特定行为

我们发现 Safari 在定义关键帧时需要使用完整的百分比值。在其他浏览器中，可以使用缩写百分比值，例如“5%”或“10%”。然而，Safari 需要在这种情况下显式使用“5%”和“100%”。

解决方案：添加完整百分比值

通过修改原始值CSS 代码包含完整的百分比值，动画现在可以在 Safari 中正常运行。下面更新的代码演示了这一点：

<br>@-webkit-keyframes keyarm {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">0% { -webkit-transform: rotate(0deg); }
5% { -webkit-transform: rotate(-14deg); }
10% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(0deg); }

登录后复制

}

有关 Safari 的附加说明4

需要注意的是，早期版本的 Safari（例如 Safari 4）完全不支持“@keyframes”语法。因此，有必要在 Safari 4 中使用供应商特定的动画前缀。

以上是为什么我的 CSS3 动画无法在 Safari 中运行？的详细内容。更多信息请关注PHP中文网其他相关文章！