Resolving browser Background-image properties does not support CSS3 animations

Problem

A problem has recently been encountered when using the Background-image property to implement CSS3-per-frame animation. In Chrome, the Background-image property supports CSS3 animations, but on Firefox, there is no animation at all.

Reason

Through the online search, only to find that the clear Background-image property in the standard is not support animation, so Firefox has followed the standard, and did not give the property support animation.

Resolution process

The workaround is to use the Backgrond-position property, which is animated in the Web Standard, so all browsers should be supported. This in the implementation, the original we can each picture as a frame, now it is necessary to change the picture of each frame to a picture, and then according to background-position positioning to each frame of the picture, here I recommend a better plug-in Grunt-spritesmith, It helps you to quickly stitch together pictures of each frame and generate corresponding Backgrond-position property positioning information.

After changing from the Background-image property to the Background-position property to implement the animation, another problem has been encountered. Because there is a tween animation between the keyframes of the CSS3 animation, the effect of the Background-position property is to move between the two positions on this mosaic image when the transition is between each frame, which is not what I want.

Therefore, you need to remove the motion tween and skip the transition between the keyframes directly. This needs to be applied to the Animation-timing-function property, which can use the Step function steps () to define how many steps to transition between keyframes, where step (1) is set to represent the one step between keyframes, removing the motion tween, This will not allow the picture to appear in the motion animation between the background-position attributes, but instead to see the direct picture switch. About step functions, you can see the blog of a great God specifically

Example:

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

Resolving browser Background-image properties does not support CSS3 animations