动画的使用

1.定义动画

第一种:

 @keyframes  move {
            /* 起始状态 */
            from {
                transform: translate(0,0);
            }

            /* 结束状态 */
            to {
                transform: translateY(400px);
            }
        }

第二种:

@keyframes move {
            /* 起始状态 */
            0% {
                transform: translate(0,0);
            }
            20% {
                transform: translate(800px,0);
            }
            40% {
                transform: translate(800px,400px);
            }
            60% {
                transform: translate(0,400px);
            }
            /* 结束状态 */
            100% {
                transform: translate(0,0);
            }
        }

定义动画总结:一般有两种定义动画的方式,第一种(不常用),其中起始状态如果是原点(开始的位置)可以省略.第二种(常用)推荐使用,其中起始状态是0%,一般起始状态是可以省略的,如果不在原点,则不能省略.100%是结束状态,不能省略.0%到100%中间可以有多个状态,看自己的项目要求有几个就设几个,中间的百分比自己可以设置的.

2.调用动画

animation: 动画的名字  动画的时间

animation: 后面+动画的属性    中间用空格隔开

谁使用动画,谁就调用动画

3.动画的属性

动画的名字(可以任意取)

2s 表示动画的时间(时间可以调,s是时间的单位秒)

动画速度      linear   表示动画匀速   ease  默认.动画以低速开始,然后加快,在结束前变慢.    ease-in  动画以低速开始    ease-out  动画以低速结束     ease-in-out   动画以低速开始和结束

infinate 无限循环动画（重复次数）

alternate 为反向 就是左右来回执行动画（跑马灯）

forwards 动画结束停留在最后一帧状态， 不循环状态使用

backwards   动画结束停留在第一帧状态， 不循环状态使用

<style>
        /* 1.定义动画 */
        @keyframes move {
            /* 起始状态 */
            from {
                transform: translate(0,0);
            }

            /* 结束状态 */
            to {
                transform: translateX(800px);
            }
        }

        .box {
            width: 200px;
            height: 200px;
            background-color: pink;

            /* 2.调用动画 */
            /* animation: 动画的名字  动画的时间 */
            /* 动画属性:动画名 动画时间 动画速度 动画的延迟时间  动画执行次数(无限循环)  动画的方向(来回执行)*/
            /* linear 匀速 */
            /* animation: move 2s linear 2s infinite alternate backwards; */

            /* 执行完毕状态不能和动画的执行次数一起执行,添加动画的方向不生效 */
            animation: boss 3s linear backwards;
        }
    </style>

4.补间动画和帧动画的区别

 /* 帧动画 一般配合精灵图使用 */

  steps(12)---(这里表示动画有几帧)

  animation: move 2s steps(12) linear alternate;

举个例子

     <style>
        div {
            width: 200px;
            height: 200px;
        }
        .one {
            background-color: pink;
            margin-bottom: 50px;
            /* 调用动画 */

            /* 补间动画 */
            animation: move 2s linear alternate;
        }
        .two {
            background-color: green;

            /* 帧动画 一般配合精灵图使用 */
            animation: move 2s steps(12) linear alternate;
        }

        /* 1.定义动画 */
        @keyframes move {
            100% {
                transform: translate(800px);
            }
        }
    </style>

5.鼠标经过暂停动画

/* 鼠标经过box，  则 ul 停止动画 */
.box:hover ul {
    animation-play-state: paused;
}

6.多组动画

/* 我们想要2个动画一起执行  animation: 动画1, 动画2, ... 动画n */
animation: run 1s steps(12) infinite, move 5s linear forwards;

总结:

动画的使用关键在于定义动画和调用动画,动画的属性没有顺序,多个属性用空格隔开.其中要区别补间动画和帧动画的使用场景,帧动画一般配合精灵图使用.调用多组动画一定要用逗号隔开.