CSS3動(dòng)畫在iOS設(shè)備上無(wú)效是一個(gè)非常常見的問(wèn)題。如果你在開發(fā)一個(gè)iOS應(yīng)用或者網(wǎng)站，你可能會(huì)發(fā)現(xiàn) CSS3 動(dòng)畫不能在 Safari 或者其他 iOS 瀏覽器上正常地運(yùn)行。

這個(gè)問(wèn)題很大程度上是因?yàn)?iOS 設(shè)備對(duì)于動(dòng)畫性能的限制，尤其是在舊的 iOS 版本中。所以在考慮使用 CSS3 動(dòng)畫的時(shí)候，你需要注意一些細(xì)節(jié)問(wèn)題：

/* 在iOS上自動(dòng)播放CSS3動(dòng)畫只能通過(guò)以下屬性激活 */
-webkit-animation-delay: 0.1s;
-webkit-animation-name: myAnimation;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;

使用上述樣式屬性可以在 iOS 設(shè)備上自動(dòng)播放 CSS3 動(dòng)畫，但是需要注意的是，iOS 設(shè)備所有的 Safari 或者其他瀏覽器都支持這些屬性。

如果你想讓你的 CSS3 動(dòng)畫在所有設(shè)備上都正常工作，你可以使用 JavaScript 腳本作為 CSS3 動(dòng)畫的 fallback 方案：

// check for iOS deviceif(navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {// do something here}

通過(guò) JavaScript 可以檢測(cè)到是否是 iOS 設(shè)備來(lái)快速切換成可以正常工作的 fallback 方案，這樣你的應(yīng)用或者網(wǎng)站將可以同時(shí)在 iPhone、iPad 和其他設(shè)備上正常運(yùn)行動(dòng)畫效果。