CSS动画与过渡

一.过渡

1. 作用:让元素的样式慢慢的变化，常配合hover使用，增强网页交互体验。

2. 属性名：transition

3. 常见取值：

4. 注意点：过渡需要：默认状态和hover状态样式不同，才能有过渡效果

   ​ transition属性给需要过渡的元素本身加

   ​ transition属性设置在不同状态中，效果是不同的:

​ （1）给默认的状态设置，鼠标移入和移出都有过渡的效果

​ （2）给hover状态设置，鼠标移入有过渡的效果，移出没有过渡的效果

二.动画

1. 动画与过渡的区别：

   过渡：过渡是实现2个状态间的变化过程

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

2. 动画的本质：

   动画的本质是快速切换大量图片时在人脑中形成的具有连续性的画面

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

3. 动画实现步骤：

   定义动画：（1）2个状态的变化，状态1变化到状态2

   ​

   @keyframes 动画类名 {
               from {
                   状态1；
               }
               to {
                   状态2；
               }
           }
   

   ​ （2）多个状态的变化，百分比是动画总时长的占比

   @keyframes 动画类名 {
               0% {
                   状态1;
               }
               50% {
                   状态2;
               }
               100% {
                   状态3;
               }
           }
   

   使用动画：animation：动画类名 动画花费时长；

4. 动画animation复合属性：

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

   注：速度曲线取值：linear：匀速；steps（数字）：表示分几步播放

   ​ 重复次数之无限循环播放写法：animation：动画类名 动画花费时长 infinite；

   ​ 动画方向取值：alternate：各个状态之间来回变换

   ​ 执行完毕时状态取值：首先要将重复次数和动画方向的取值删除，然后添加forwards：动画停留在结束的状态

   注意：动画名称和动画时长必须赋值

   ​ 取值不分先后顺序

   ​ 如果有两个时间值，第一个时间表示动画时长，第二个时间表示延迟时间

5. animation拆分写法：

   

6. 精灵动画制作步骤：

   准备显示区域：设置盒子尺寸是一张小图的尺寸，背景图是当前精灵图

   定义动画：改变背景图的位置（移动的距离就是背景图的宽度）

   使用动画：添加速度曲线steps（N），N与精灵图上的小图个数相同

   ​ 添加无限重复效果

7. 多组动画写法：

   animation：动画1及其属性值，动画2及其属性值，动画3及其属性值…