html 动画 

.nana{
		width: 200px;
	    height: 300px;
		background:url(../image/bb.png) no-repeat;
		-webkit-animation-name: zwn;
		-webkit-animation-duration: 900ms;
		-webkit-animation-iteration-count: infinite;
		-webkit-animation-timing-function: step-start;
		
		
		
		
	


	}
	@-webkit-keyframes zwn{
	0%{background-position:0 0 ;}
	14.2%{background-position: -180px 0;}
	28.4%{background-position: -360px 0;}
	42.6%{background-position: -540px 0;}
	56.8%{background-position: -720px 0;}
	71%{background-position: -900px 0;}
	85.2%{background-position: -1080px 0;}
	100%{background-position: 0 0;}
}

　　html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/index.css" />
	</head>
	<body>
		<div class="nana"></div>
	</body>
</html>　

笔记：

实现动画步骤

第一步：-webkit-animation-name 动画名字

第二步：创建动画

@-webkit-keyframes zwn{
	0%{background-position:0 0 ;}
	14.2%{background-position: -180px 0;}
	28.4%{background-position: -360px 0;}
	42.6%{background-position: -540px 0;}
	56.8%{background-position: -720px 0;}
	71%{background-position: -900px 0;}
	85.2%{background-position: -1080px 0;}
	100%{background-position: 0 0;}
}
第三步：动画运动时间，动画运动次数，以及开始地方
注意：step-start等同于steps(1,start)，动画分成1步，动画执行时为开始左侧端点的部分为开始；



图片我已经上传






            

            
posted @ 
2017-06-05 23:17 
943987243 
阅读(223) 
评论(0) 
编辑 
收藏 
举报