CSS 动画在移动设备上不起作用 [Chrome 或 Safari iOS]答案

【问题标题】：CSS animation not working on Mobile [Chrome or Safari iOS]CSS 动画在移动设备上不起作用 [Chrome 或 Safari iOS]
【发布时间】：2015-04-28 03:44:21
【问题描述】：

我涉足 CSS 动画，但我终其一生都无法弄清楚为什么这在我的 Iphone 5（Chrome 和 Safari）上不起作用。

编辑：具体来说，我得到了最终状态，完全没有动作

Animation | Codepen.io

部分动画代码：

@keyframes base {
0% {transform: scale(0);}
10% {transform: scale(1.1);}
30% {transform: scale(.98);}
50% {transform: scale(1);}
60% {transform: scale(1);}
70% {transform: scale(1.3);}
90% {transform: scale(0);}
100% {transform: scale(0);}
}

【问题讨论】：

具体是什么不起作用？
我得到了最终状态，完全没有动作。

标签： ios css animation mobile

【解决方案1】：

您需要在转换中添加 -webkit- 前缀。在 iOS 上，所有浏览器都使用 safari webkit（因为它们是基于 uiwebview 的），目前 ios webkit 只支持带前缀的转换。您所看到的是，在整个动画过程中，transform 始终为 0，因为未使用非前缀选择器。

【讨论】：

完美！原来如此，谢谢！