动画的使用

定义动画

定义动画 @keyframes

	@keyframes  动画名称 {
               from {}
               to {}
                      }
	@keyframes{
               0% {}
              20% {}
              50% {}
             100% {}
                       }

使用动画：

属性：

         animation: 动画名称 动画时长;

animation属性

  复合属性 

写法：

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

注意事项：

取值不分先后顺序

• 必须赋值项：动画名称和动画时长
• 若出现2个时间：第一个时间为动画时长， 第二个时间为延迟时间

拆分写法：“通常配合:hover使用”

• animation-name：动画名称
• animation-duration：动画时长
• animation-delay：延迟时间
• animation-fill-mode：动画执行完毕时状态
• forwards：最后一帧状态
• backwards：第一帧状态（默认值）
• animation-timing-function：速度曲线
• steps(数字) : 逐帧动画
• animation-iteration-count：重复次数
• infinite：无限循环
• animation-direction：动画方向
• alternate：反向
• animation-play-state：动画播放状态
• paused：暂停

逐帧动画

• 作用：
•             精灵动画
•             搭配精灵图使用

核心：

                    动画速度曲线为steps(N)

                    而N与精灵图小图个数相同

多组动画

              作用：一个元素添加多个动画效果

写法：

animation: 动画1，动画2，动画N；