css3 里面的动画——帧动画

1.属性解释

动画名称：
animation-name: 起个名字;
动画执行时间：
animation-duration: 写个时间;
动画执行方式：
animation-timing-function

linear	匀速
ease	开始时慢，然后加快，在结束前再次变慢
ease-in	以低速开始
ease-out	以低速结束
ease-in-out	以低速开始和结束

动画的延迟：
animation-delay: 写个延迟时间;
动画播放次数：   infinite循环播放
animation-iteration-count: 定个循环次数;
播放方式：
animation-direction

normal	默认值。动画正常播放
reverse	反向播放
alternate	奇数次正向播放，偶数次反向播放
alternate-reverse	奇数次反向播放，偶数次正向播放

动画是否播放： paused（暂停）
animation-play-state: running（运行）;
动画停止到完成位置：
animation-fill-mode

none	不再应用任何元素
forwards	动画结束后，应用播放次数属性（播放几次）
backwarks	动画开始时，应用from中的属性值或to中属性值
both	遵循forwards和backwarks规则

2.案例一（方块移动）

（1）创建一个形状（这里创建一个盒子）

（2）加上动画样式

效果展示：

3.案例二（西游记）

（1）加上背景布

（2）背景加上动画效果

效果展示：（背景是水平移动效果）

（3）加上悟空

效果展示：

（4）加上悟空动画效果（8帧:造成动态走路效果）

（5）同理加上八戒、沙僧、师傅

效果展示：