解決瀏覽器background-image屬性不支持css3動畫

解決瀏覽器background-image屬性不支持css3動畫

問題

最近在使用background-image屬性來實現css3的逐幀動畫時，碰到了個問題。在chrome瀏覽器上，background-image屬性是支持css3動畫的，但是到了firefox上，就完全看不到任何動畫。

原因

通過網上查找，才發現W3C標準中明確background-image屬性是不支持動畫的，所以firefox由於遵循了該標準，並沒有給該屬性支持動畫。

解決過程

解決方法是使用backgrond-position屬性，該屬性在W3C標準中是支持動畫的，因此所有瀏覽器應該是可以支持的。這在實現時，原來我們可以每一張圖片作爲一幀，現在就要改成把每一幀的圖片拼接到一張圖片上，然後根據background-position定位到每一幀的圖片，這裏我推薦一個比較好的插件grunt-spritesmith，它可以幫助你快速的把你每一幀的圖片拼接在一起並生成相應的backgrond-position屬性定位信息。

從background-image屬性換成background-position屬性來實現動畫後，又遇到了個問題。由於css3動畫的關鍵幀之間是有補間動畫，因此background-position屬性在每一幀之間的過渡時，它的效果是在這張拼接的圖片上的兩個定位之間進行移動，這個並不是我想要的。

因此就需要去除該補間動畫，直接跳過這關鍵幀之間的過渡。這就需要應用到animation-timing-function屬性，該屬性可以使用階躍函數steps()定義關鍵幀之間分多少步進行過渡，這裏設置爲step(1)就表示關鍵幀之間一步到位，去除了補間動畫，這就不會讓圖片出現在background-position屬性之間的移動動畫，而是看到直接的圖片切換。關於階躍函數，可具體查看某大神的博客