ios - CSS 动画不适用于移动设备 [Chrome 或 Safari iOS]

Question

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

编辑:具体来说，我正在进入最终状态，完全没有任何 Action

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只支持带前缀的transforms。您看到的是整个动画中变换始终为 0，因为未使用非前缀选择器。