移动web-动画

动画

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

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

        使用场景：使用animation相关属性控制动画执行过程

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

        属性：

                属性                                          作用                                     取值

                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为暂停，通常配合:hover使用

                animation-timing-function       速度曲线                  steps(数字)：逐帧动画

        注意：

            1 动画名称和动画时长必须赋值

            2 取值不分先后顺序

            3 forwards不能和infinite同时使用 否则不生效

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

            5 调用多个动画时 用逗号隔开

        实现步骤：

            1 定义动画

                格式一：@keyframes 动画名称{

                            from{}

                            to{}

                        }

                格式二：@keyframes 动画名称{

                            0%{}

                            20%{}

                            40%{}

                            60%{}

                            80%{}

                            100%{}

                        }

                        注意：百分比为占整个动画的时间比

            2 使用动画(谁用加给谁)

                animation:动画名称 动画时长;