动画特点

实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）

构成动画的最小单元：帧或动画帧

如何使用动画,即动画使用方法:定义+调用动画

定义动画：

方法一:

keyframes:关键帧

dance动画名称,可以随便取

方法二:

动画序列可以用百分比,可以是多个序列

0%=from 动画开始

100%=to 动画结束

调用动画:

animation:动画名称 动画时长 曲线速度 延迟时间 重复次数 动画方向 执行完毕时状态;

动画属性

1. 动画名字参照css类选择器命名
2. 动画时长和延迟时间别忘了带单位 s,连写出现两个时间时,第一个时间表示动画时长,第二个表示延迟时间
3. infinate 无限循环动画
4. alternate 为反向 就是左右来回执行动画（跑马灯）
5. forwards 动画结束停留在最后一帧状态,,默认状态是backwards,结束时停在第一帧状态;不能和infinite,alternate一起使用否则失效
6. linear 让动画匀速执行

注意点:动画的结束状态无法和动画的重复次数以及动画的方向一起使用

鼠标经过暂停动画

多组动画

精灵动画:

精灵动画制作步骤

1.➢ 准备显示区域:设置盒子尺寸是一张小图的尺寸，背景图为当前精灵图 2.➢ 定义动画:改变背景图的位置（移动的距离就是精灵图的宽度 3.➢ 使用动画:添加速度曲线steps(N)，N与精灵图上小图个数相同 4.➢ 添加无限重复效果