用css实现简单的动画——“奔跑的小子”（有知识梳理和图片）

一、实现效果

	
		
		
		
	
	
		

			
		
	

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

二、让人物动起来，而不是原地踏步

1、代码改动

@keyframes run{
				from{
					background-position: 0 0;
					margin: 90px 0;
				}
				to{
					background-position: -474px 0;
					margin-left: 300px;
				}
1
2
3
4
5
6
7
8
9

2、效果图

其实就通过margin-left实现的，我真是个小机灵鬼！嘿嘿。

三、知识梳理

1、关键帧的设置

格式

@keyframe run{//定义加动画效果的名字，类似与int a(),这种函数定义。
from{
//开始的位置
}
to{
//结束的位置
}
}
1
2
3
4
5
6
7
8

2、animation的一些属性

1. animation-name//需要使用的动画效果名字；
2. -animation-duration//动画效果持续的时间；
3. animation-timing-function//动画执行的速度，有下列子属性：
   
4. animation-delay//动画效果延迟的；
   animation-iteration-count//动画执行的次数，可以用阿拉伯，和infinite（无穷）;
5. animation-direction//动画运行的方向：
   
6. animation-paly-state//动画运行状态

7. animation-fill-mode//动画结束后的位置：

四、素材

随便写写，不喜勿喷。