CSS动画无法在移动[Chrome或Safari iOS]上运行

Question

我涉足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);}
}

Answer 1

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