CSS动画无法在移动设备上运行[Chrome或Safari iOS] [英] CSS animation not working on Mobile [Chrome or Safari iOS]

问题描述

我涉足CSS动画，我一辈子都无法弄清楚为什么这在我的Iphone 5(Chrome和Safari)上都无法使用.

I dabbled into CSS animations and I can't for the life of me figure out why this isn't working on my Iphone 5 (both Chrome and Safari).

编辑:具体来说，我正在进入最终状态，根本没有动静

edit: Specifically,I'm getting the end-state, with no motion at all

动画| 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);}
}

推荐答案

您需要在转换中添加-webkit-前缀.在iOS上，所有浏览器都使用safari webkit(因为它们基于uiwebview)，并且当前ios webkit仅支持带前缀的转换.您会看到的是，由于不使用非前缀选择器，因此在整个动画中变换始终为0.

You need to add -webkit- prefixes to your transforms. On iOS, all browsers use safari webkit (because they are based on uiwebview), and currently ios webkit only supports transforms with a prefix. What you are seeing is that the transform is always 0 throughout the animation because the non-prefixed selector is not used.

这篇关于CSS动画无法在移动设备上运行[Chrome或Safari iOS]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！