3. CSS3 动画

css动画

以往我们想实现页面上的自动动画需要JavaScript来实现，通过setTimeout的时间循环加上过渡效果来做出动画，但是这是比较繁琐的。
在之前我们学习的过渡时，也能做出一些动画效果，但是这还只是最基础的，css的动画是颠覆性的

3.1 动画的基本使用

我们还是用一个需求来引出动画的使用：我们想页面一打开，一个盒子就从左边走到右边。

keyframes，也就是关键帧，对于用过Pr或者做过动画的人来说一定很熟悉了，动画就是依靠多个关键帧来进行运动的。不过在css中他有一个别的名字—-动画序列。

也就是说我们可以用百分比%的形式来插入关键帧，css样式会自动从上一个关键帧过渡到下一个关键帧。所以不只是起点和终点，所以可以0%，50%，100% 这样中间就多了一个关键帧，会自动做过渡。

关键帧注意点

百分比代表的是 过渡时间的划分，比如过渡时间是10s，则从0到50%分配5s，50%到100%分配5s，就是这个意思。

定义动画序列move（move那里是自己起名的）

/*自定义一个动画序列*/
@keyframes move {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(50px);
    }
}

插入额外关键帧

@keyframes move {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(50px);
    }
    100% {
        transform: translateY(50px);
    }
}

2.元素使用（调用）动画

仅仅是定义了还不行，元素必须明确调用哪一个动画才行，这里必须用到两个参数：animation-name（动画名称） 和 animation-duration（动画持续时间）

这里的动画名称就是用 @keyframes 创建的动画序列的名称，持续时间必要，否则动画无法播放。

div {
    height: 200px;
    width: 200px;
    background-color: pink;
    /*调用的动画序列名称*/
    animation-name: move;
    /*动画完成(持续)时间*/
    animation-duration: 2s;
}

animation属性还有一些其他的选项，作为扩展了解一下吧：

animation取值：

<’ animation-name ‘>：
检索或设置对象所应用的动画名称
<’ animation-duration ‘>：
检索或设置对象动画的持续时间

<’ animation-timing-function ‘>：
检索或设置对象动画的过渡类型

<’ animation-delay ‘>：
检索或设置对象动画延迟的时间

<’ animation-iteration-count ‘>：
检索或设置对象动画的循环次数
infinite：
无限循环
：
指定对象动画的具体循环次数

<’ animation-direction ‘>：
检索或设置对象动画在循环中是否反向运动
normal： 正常方向
reverse： 反方向运行
alternate： 动画先正常运行再反方向运行，并持续交替运行
alternate-reverse： 动画先反运行再正方向运行，并持续交替运行

<’ animation-fill-mode ‘>：
检索或设置对象动画时间之外的状态
none： 默认值。不设置对象动画之外的状态
forwards： 设置对象状态为动画结束时的状态
backwards： 设置对象状态为动画开始时的状态
both： 设置对象状态为动画结束或开始的状态

<’ animation-play-state ‘>：
检索或设置对象动画的状态。w3c正考虑是否将该属性移除，因为动画的状态可以通过其它的方式实现，比如重设样式
running： 运动
paused： 暂停

animation复合（简写）写法

• 多个属性值之间，以空格进行分割
• 如果提供多组属性值（不同的动画序列），则以逗号，进行分隔。

• 注意：如果只提供一个参数，则为 <’ animation-duration ‘> 的值定义；如果提供二个参数，则第一个为 <’ animation-duration ‘> 的值定义，第二个为 <’ animation-delay ‘> 的值定义

  div {
    height: 200px;
    width: 200px;
    background-color: pink;
    /* animation-name: move;*/
    /* animation-duration: 2s;*/
    等价于上面两句，属性值之间用空格分隔
    animation: move 2s
  }

  如果有多组动画序列需要引入：

  div {
    height: 200px;
    width: 200px;
    background-color: pink;
    /*使用两组不同的动画序列，之间以逗号分隔*/
    animation: move 2s, change 5s;
  }