动画的基本使用

动画的特点

动画最大的特点可以不用鼠标触发，自动的，反复的执行某些动画。

动画和过渡的区别在于：

1, 过渡是两个状态的变化,动画可以定位为多个状态之间的变化过程。

2, 过渡要搭配鼠标执行效果且只能执行一次 ,而动画可以自动执行，反复执行某些动态效果 相比过渡更为灵活多变。

动画的使用

动画使用分为定义和调用：

注意点：动画要先定义再进行调用。

1. 定义

1. 开始状态from等同于0% 开始状态起点为0时可以省略。

2. 结束状态to 等同于100% 结束状态不能省略会影响后面添加属性。

/* 定义动画 */
/* @keyframes + 动画名*/
  @keyframes move {
    /* 开始状态 起点为0时可以省略 */
    from {
        transform: translate(0, 0);
    } 
    40% {
        transform: translate(0, 800px);
    }
    /* 结束状态 */
    to {
        transform: translate(800px, 0);
    }
}

动画名建议参考css类选择器名。

2. 调用

语法： animation: 动画名 动画执行时间(单位s) ;

/*调用动画*/
.box {
    width: 200px;
    height:200px;
    /* 2. 使用动画  animation: 动画名称 执行时间;*/
    animation: move 1s infinite;
}

动画的属性

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

2. alternate :反向执行动画 （需要搭配infinate使用）

3. forwards :动画结束停留在结束状态

4. linear : 让动画匀速执行

5. 延迟时间与动画执行时间写法相同 数字+s

注意点 :
1.多个属性用空格隔开
2.多个属性顺序可以打乱
3.forwards不能和无线循环 ，反向执行一起使用

鼠标经过暂停动画

语法：animation-play-state: paused;

/* 鼠标悬停在box上，ul停止动画 */
.box:hover ul {
    animation-play-state: paused;
}

逐帧动画

语法：animarion: 动画速度帧 steps(帧数) ;

其原理即将每帧不同的图像连续播放，从而产生动画效果 ，搭配精灵图使用。

.box {
    width: 140px;
    height: 140px;
    background: url(./images/bg.png);
    animation: run 1s steps(12) infinite;
}

@keyframes run {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: -1680px 0;
    }
}

多组动画

多个动画一起执行 animation: 动画1, 动画2, ... 动画n；

.box{
    animation: move 1s infinite, move 5s linear forwards;
}

动画与动画之间用逗号隔开。