使用animation添加动画效果

岳泽以

发布于 2022-10-26 16:34:32

7100

发布于 2022-10-26 16:34:32

文章被收录于专栏：岳泽以博客

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

动画的本质是快速切换大量图片时在人脑中形成的具有连续性的画面，构成动画的最小单元是帧或动画帧。

实现步骤

1.定义动画

form...to定义动画：两个状态之间变化

        /* 定义动画：从200变大到600 */
        @keyframes 动画名称 {
            from {
                width: 200px;
            }
            to {
                width: 600px;
            }
        }

百分比定义动画：多个状态间的变化

        /* 定义动画：200 到 500*300 到 800*500 */
        @keyframes 动画名称 {
            0% {
                width: 200px;
            }
            50% {
                width: 500px;
                height: 300px;
            }
            100% {
                width: 800px;
                height: 500px;
            }
        }

百分比指的是动画总时长的占比，比如动画总时长为10秒钟，50%表示5秒时变成宽500px,高300px。

2.使用动画

给元素添加使用动画属性并加上动画时间

   animation: 动画名称 动画花费时间;

复合属性

使用 animation复合属性控制动画执行过程

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

速度曲线指的是动画变化过程中的速度，延迟时间可以让动画等一会再执行。

设置这些属性需要注意：

动画名称和动画时长必须赋值
各个属性的取值不分先后顺序
如果有俩个时间值，第一个表示动画时长，第二个表示延迟时间。
在测试执行完毕状态时建议把重复次数和动画方向去掉。

常见的一些动画复合属性：

动画以均速度执行

animation: change 10s linear;

分布动画，分三次执行完成

animation: change 1s steps(3) 1s 3;

动画无限循环

animation: change 1s infinite alternate;

默认值, 动画执行完成后停留在最初的状态

animation: change 1s backwards;

动画执行完后停留在结束状态

animation: change 1s forwards;

动画的单个属性拆分写法：

属性	作用	取值
animation-name	动画名称
animation-duration	动画时长
animation-delay	延迟时间
animation-file-mode	动画执行完毕时状态	forward：最后一帧状态backwards：第一帧状态
animation-timing-function	速度曲线	step(*数字)：逐帧动画
animation-iteration-count	重复次数	infinite为无限循环
animation-direciton	动画执行方向	alternate为反向
animation-play-state	暂停动画	paused为暂停，通常配合:hover使用