CSS3 Transition 过渡动画用法介绍

一、 `transition`过渡动画介绍

通常，当一个元素的样式属性值发生变化时，我们会立即看到页面元素发生变化，也就是页面元素从旧的属性值立即变成新的属性值的效果。css属性transition能让页面元素不是立即的、而是慢慢的从一种状态变成另外一种状态，从而表现出一种动画过程。

二、 `transition`属性语法介绍

属性	介绍
`transition-property`	元素的哪一个属性将用过渡表现。例如, `opacity`,`color`。默认值是`all`。
`transition-duration`	元素过渡过程持续时间。例如，`1s`。默认值是`0s`。
`transition-timing-function`	元素过渡时的速率函数。例如, `linear`、 `ease-in`、`steps`动画分段函数或自定义的 `cubic-bezier` 函数)。默认值是`ease`，中间快，两头慢。
`transition-delay`	元素过渡延迟的时间。例如，`1s`。默认值是`0s`。

transition-property、transition-duration、transition-delay这三个transition属性中的每个属性都支持多个参数值，参数值之间用逗号分隔，这样能够用一个样式规则制定多种CSS属性的变化。需要注意的是，每个transition属性中的多个参数值的顺序一定要一致。

例如：

div {
  transition-property: opacity, left;
  transition-duration: 2s, 4s;
  transition-delay: 1s, 0s;
}

2.1、 `transition-property`

允许值: none | all | <属性名>

初始值: all

描述: 指明什么属性将触发过渡动画效果。none值表示没有变化。all值表示所有可以动画演示的属性都可以触发动画效果。否则，只有指定的属性值方式变化才能触发动画效果。

下面是一段实例：

 <style>
   * { padding: 0;margin: 0;box-sizing: border-box;}

    .t-demo { width: 600px;margin: 20px; outline: 2px dashed; }

    .t-demo pre { transition: 2s;position: relative;left: 0;width: 100px;height: 100px;margin: 20px 0;
      border-radius: 50%;font-size: 18px;text-align: center;line-height: 100px;background: #82B600;color:#fff;  }
      
    .t-demo:hover pre { left: 500px;color: red;}

    .t-demo pre:nth-child(1) { transition-property: none;}

    .t-demo pre:nth-child(2) { transition-property: all; }

    .t-demo pre:nth-child(3) { transition-property: left; }

    .t-demo pre:nth-child(4) { transition-property: left, color;line-height: 30px;padding: 20px 0; }
  </style>
  <div class="t-demo">
    <pre>none</pre>
    <pre>all</pre>
    <pre>left</pre>
    <pre>left,<br>color</pre>
  </div>

2.2、 `transition-duration`

允许值: <时间>

初始值: 0

描述: 指明元素过渡持续的时间长度。

.t-demo pre:nth-child(1) { transition-duration: 0s;}

.t-demo pre:nth-child(2) { transition-duration: 1s;}

.t-demo pre:nth-child(3) { transition-duration: 2s; }

.t-demo pre:nth-child(4) { transition-duration: 3s;}

2.3、 `transition-timing-function`

初始值: ease

描述:

transition-timing-function属性描述了动画随着时间运动的速度-时间函数。可以使用几种常见的元素过渡时的速率函数，也可以使用贝塞尔(cubic-bezier)函数加控制点来自定义动画的变换速度方式。
step-start等同于 steps(1, start),过渡效果分一步完成，在步的起始开始，即直接过渡到效果。
step-end 等同于 steps(1,end)，过渡效果分一步完成，在步的结束开始，即transition-duration之后完成过渡效果。
steps动画分段函数。steps有两个参数。第一个参数表示把动画分割成几次。第二个参数可以取 start 或 end 两者其一。

下面是一段实例：


.t-demo pre:nth-child(1) { transition-timing-function: ease;}

.t-demo pre:nth-child(2) { transition-timing-function: linear;}

.t-demo pre:nth-child(3) { transition-timing-function: ease-out; }

.t-demo pre:nth-child(4) { transition-timing-function: cubic-bezier(0.8,0,0,0.8);}

.t-demo pre:nth-child(5) { transition-timing-function: steps(3,start);}

<div class="t-demo">
    <pre>ease</pre>
    <pre>linear</pre>
    <pre>ease-out</pre>
    <pre>cubic-bezier</pre>
    <pre>steps(3,start)</pre>
</div>

2.4、 `transition-delay`

允许值: <时间>

初始值: 0

描述: 元素过渡动画开始延迟的时间。

2.5、 `transition`属性简写

下面transition是的简写形式对应的单独的属性定义：


div {
    
    /*  
        transition-property:left;
        transition-duration: 2s;
        transition-timing-function: ease;
        transition-delay: 1s;
     */
    transition: left 2s ease 1s;
    
    /*  
        transition-property:left;
        transition-timing-function: ease;
        transition-duration: 2s;
     */
    transition: color 2s;
    
     /*  
        transition-property:all;
        transition-duration: 2s;
        transition-timing-function: ease;
        transition-delay: 0s;
     */
     transition: 2s;
}

2.6、 `transition`的使用注意事项

transition需要明确知道，开始状态和结束状态的具体数值，才能计算出中间状态。比如，height从0px变化到100px，transition可以算出中间状态。但是，transition没法算出0px到auto的中间状态，也就是说，如果开始或结束的设置是height: auto，那么就不会产生动画效果。类似的情况还有，display: none到block，background: url(foo.jpg)到url(bar.jpg)等等。