每日一个小目标(动画)

1、定义动画

        第一种方法、@keyframes 动画名称 {

                        /* 开始状态 */

                        from { }

                        /* 结束状态 */

                        to { }

              }

        第二种方法、@keyframes 动画名称 {

                                0% { }

                                25% { }

                                50% { }

                                . . . . . 

                                100% { }

              }

2、调用动画

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

        注意：（1）取值不分先后

                   （2）必须赋值项：动画名称和动画时间

                   （3）若出现两个时间，第一个为执行时间，第二个为延迟时间

    

3、动画的属性（了解）

        animation-name                                         动画名称
        animation-duration                                     持续时间
        animation-timing-function：ease;              运动曲线  ，默认为ease，linear 匀速。steps(数字) 表示分几步走完
        animation-delay：0s；                               延迟时间，默认为0s
        animation-iteration-count；1;                     重复次数 ，默认为1次，infinite 无限次          
        animation-direction：normal;                     动画方向，是否反向播放 ，默认为normal，正常，alternate为反向播放
        animation-fill-mode：backword;                 默认是回到起始状态， forwards是停留在结束状态
        animation-play-state：paused;                   和 hover 搭用，鼠标经过，停止动画

        

4、逐帧动画

        配合精灵图使用，动画速度曲线为 steps(N)，N为精灵图的个数

        一个元素可以写多组动画：

        animation: 动画1, 动画2, 动画3, .....; [多组动画之间用逗号隔开]