CSS3的animation實在是讓人愛不釋手，越用越覺得離不開了。較高的性能以及和js的邏輯無關性，可以專注于動畫效果本身，真的很不錯，尤其在手機上，只需主要考慮webkit內核的，更是爽，但隨著使用，也發現一些坑，就分享給大家吧。

1. 對于一個要顯示動畫的元素，一定要先show，然后在執行動畫語句。在iPhone設備上如果先執行動畫語句再顯示元素，則動畫可能無效，android則沒問題。

2. 有時候我們執行動畫語句的時候發現第一次并不生效，但是執行過一次，再次執行就好了。此問題只會在移動上出現，PC端則ok。解決辦法就是設置animation-delay，一般0.2s就ok了。至于深層次的原因不得而知，猜測可能是因為移動畢竟渲染性能不如PC端，估計有時候元素還沒有完全就緒吧。

3. 使用-webkit-transition的時候，有些個別的瀏覽器版本可能會出現閃爍的情況，很坑爹。網上搜到的解決方案：

-webkit-backface-visibility: hidden;(設置進行轉換的元素的背面在面對用戶時是否可見：隱藏)

-webkit-transform-style: preserve-3d; (設置內嵌的元素在 3D 空間如何呈現：保留 3D )。

4. Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 規則和 animation 屬性。

Chrome 和 Safari 需要前綴 -webkit-。

5、Safari對css的校驗比較嚴格，一但出現錯誤就中段渲染，例如少了或多了括號，今天我就遇到了這個問題，Chrome下樣式正常，到Safari下就渲染不到樣式，查看遠程文件又都有在。。。想破腦袋想不到啥原因，最后去w3c上校驗錯誤，不試不知道一試嚇一跳，少了幾個冒號多了個括號哈哈。。。

對蘋果的嚴謹又重新認識了一遍。。。

總結

以上是生活随笔為你收集整理的animation动画不生效_关于CSS3的animation使用的一些坑，需要注意下！的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。