解決瀏覽器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>