CSS动画 animation

自学和实习过程中用的次数少，在这里专门记录一下

声明动画

keyframes：关键帧 （之前学pr的时候用到过不少关键帧）

@keyframes 动画名{ }

        @keyframes aaa {
            0%{
                width: 100px;
                height: 50px;
            }
            50%{
                width: 250px;
                height: 123px;
                background: brown;
            }
            100%{
                width: 200px;
                height: 250px;
                background: blue;
            }
        }

使用动画

复合写法

animation: name duration timing-function delay iteration-count direction fill-mode;

拆分写法

1. animation-name 动画名

2. animation-duration 动画时长

记得带单位

3. animation-timing-function 速率曲线

默认为 ease

4. animation-delay 延迟时间

记得带单位，默认为0s

5. animation-iteration-count 重复次数

iteration 迭代

默认为1，infinite 无限循环

6. animation-direction 播放方向

默认为 normal 正向播放，reverse 逆向播放，alternate 0-100-0-100-0的播放（配合多次循环），alternate-reverse 100-0-100-0-100的播放（配合多次循环）

7. animation-play-state 播放状态

默认为 runing，paused暂停

两个类，用js操作，当动画需要停止时给dom元素添加暂停的类，需要运动时，添加另一个类

.active { 
    animation-play-state: running;
} 
.paused { 
    animation-play-state: paused;
}

8. animation-fill-mode 结束状态

默认为 backwards 向后回到最初状态，forwards 保持最新状态

8个参数，不经常用的话，谁记谁迷糊