过渡与动画

1. 什么是动画

动画是指由许多帧静止的画面，以一定的速度（如每秒16张）连续播放时，肉眼因视觉残象产生错觉，而误 以为画面活动的作品。为了得到活动的画面，每个画面之间都会有细微的改变。

想要在网页中得到动画，如果每一帧都由开发者自己设计，费时费力。而transition过渡属性与animation动画属性可以帮助我们自动的生成动画关键帧。

2. transition过渡

我们需要指定动画的第一帧与最后一帧，然后由transition自动生成中间的动画帧。

也就是说需要元素的属性发生改变，配合transition即可得到动画。而我们学习过的能使元素属性改变的是一些状态类的伪类选择器，比如:hover，另外通常我们还会配合JavaScript来展示过渡。

来看一个简单的案例：

<style>
  #wrap{
    width: 100px;
    height: 100px;
    background-color: red;

    transition: 2s;
  }
  /*width 和 背景色的变化会在2s内完成*/
  #wrap:hover{
    width: 200px;
    background-color: blue;
  }
</style>
<div id="wrap"></div>

transition分解属性

（transition:过渡属性 过渡时长 速度曲线 延迟时长;）

• transition-property

  哪个属性需要过渡。默认值 all，表示全部属性都应用过渡。

• transition-duration

  过渡持续时间。通常用秒s 或者 毫秒ms作单位。默认值0，所以这一项是必须的，否则跟瞬间变化没有区别。

• transition-timing-function

  定义过渡的速度曲线。默认值ease。

  值	描述
  linear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
  ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
  ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
  ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
  ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
  cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

  贝赛尔曲线在线生成器(opens new window)

• transition-delay

  过渡延迟多久后开始执行。通常用秒s 或者 毫秒ms作单位。默认值0。

多属性分开设置

如果针对不同属性需要有不同的过渡设置，可以使用逗号分隔开：

transition: width 1s, background-color 5s;

3. animation动画

与transition不同的是，animation可以定义好关键帧然后主动的执行动画。

• 定义关键帧

  @keyframes xxx{ /*xxx为自定义的动画名，可以按照见名知意的原则进行命名*/
    0%{/*第一帧*/
        width: 100px;
    }
  
    30%{/*中间帧会自动生成，也可按照需要自行补帧*/
        width: 0px;
    }
  
    100%{/*最后一帧*/
        width: 500px;
    }
  }

• 调用动画

  #wrap{
    width: 100px;
    height: 200px;
    background-color: red;
    animation: xxx 5s;/*在5s的时间内，完成xxx指定的动画*/
  }

animation分解属性

（animation: name duration timing-function delay iteration-count direction;）

• animation-name

  调用哪一个动画（哪一个@keyframes）。默认值none，所以必须设置对应动画名。

• animation-duration

  完成单次动画所需时间。通常用秒s 或者 毫秒ms作单位。默认值0，所以这一项是必须的，否则跟瞬间变化没有区别。

• animation-timing-function

  动画的速度曲线。同transition-timing-function的取值一样，不再赘述。

• animation-delay

  动画延迟多久后执行。通常用秒s 或者 毫秒ms作单位。默认值0。

• animation-iteration-count

  规定动画的播放次数，默认值 1 。如果想要无限循环则设置值为 infinite 。

• animation-direction

  规定动画是否反向播放，默认值normal。如果需要反向播放则设置值为 alternate 。

  当设置了反向播放时，动画的播放次数必须大于 1，才能生效。因为第一次播放是不会反向的，第二次播放才会反向，所以动画播放次数起码是2次，才能看到反向效果。

animation-play-state

animation-play-state 用于规定动画的暂停或者播放状态。通常配合伪类或者js来控制动画的播放状态。

animation-fill-mode

animation-fill-mode用于规定动画在播放之前或之后，其动画效果是否可见。

（PS：要搞清楚，元素的 初始状态 和 动画的第一帧 并不一定是一样的。）

4. 注意事项

并不是所有属性都能产生动画效果（比如display、z-index等等），只有确却的数值到数值的变化，或者颜色到颜色的变化，才能拥有动画效果。举例：

<style>
  #wrap{
    width: 100px;
    height: 200px;
    background-color: pink;
    position: relative;

    transition: 1s;
  }
  #wrap:hover{
    top: 20px;/*这里并不会产生动画，因为 top的初始值是auto， auto变到20px并不是一个数值到数值的变化，所以没法产生动画*/
  }
</style>
<div id="wrap"></div>