解決瀏覽器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屬性之間的移動動畫，而是看到直接的圖片切換。關於階躍函數，可具體查看某大神的博客

 

例子：

	<div class="test1"></div>
	<style> .test1 {
	width: 90px;
	height: 60px;
	-webkit-animation-name: skyset;
	-webkit-animation-duration: 2000ms;
	-webkit-animation-iteration-count: infinite; /*無限循環*/
	-webkit-animation-timing-function: step-start;
	}
	@-webkit-keyframes skyset {
	0% {
	background: red;
	}
	50%{
	background: blue
	}
	100% {
	background: yellow;
	}
	}</style>
	<script></script>