CSS3实现逐帧动画

实现逐帧动画一般用的图片 是雪碧图

CSS3实现的方法是 添加animation

.n {
		width: 75px;
		height: 75px;
                background-image: url(../img/shu6.jpg);
		background-size: 75px;
		/*infinite 指无限次循环 ,alternate指播放后反向 */
		animation: p8 steps(60, end) 1.5s infinite alternate;
		-ms-animation: p8 steps(60, end) 1.5s infinite alternate;
		-webkit-animation: p8 steps(60, end) 1.5s infinite alternate;
		-moz-animation: p8 steps(60, end) 1.5s infinite alternate;
	}

 animation 第一个animation-name属性是动画运动的方法。eg：

@keyframes p8 {
		100% {
			background-position: 0 -4500px;
		}
	}
	
	@-ms-keyframes p8 {
		100% {
			background-position: 0 -4500px;
		}
	}

steps（n,end)是表明动画一共有多少帧，有4帧就写成 

steps(4) 或者steps(4,end)

animation有两个时间属性，第一个是animation-duration时间属性是表示完成一个周期所需时间，第二个时间是animation-delay表示间隔时间或者是延迟多少时间开始一个周期（非必填）

.tusiji{
	width: 32px;
	height: 35px;
	background-image: url(../img/tusiji.png);
	animation: tusiji steps(4) .25s 100ms infinite alternate; //表示动画周期是.25s 时间 100ms是动画开始前等待的时间
}

animation-iteration-count属性：infinite属性是表示无限循环，也可用数字替代，表示循环多少次

animation-direction

规定动画是否在下一周期逆向地播放。默认是 "normal",表示重复。alternate表示逆向