transition

transition的属性及值

transition-property:指定应用过度属性的名称 默认值为all 表示所有可被动画的属性都表现出过度动画 可指定多个property； none：没有过度动画；all：所有可被动画的属性都表现出过度动画； IDENT：属性名称（可以指定多个）

transition-duration:属性以秒或毫秒为单位指定过度动画所需的时间。 默认值为0s，表示不出现过渡动画。可以指定多个时长，每个时长会被应用到由transition-property指定的对应属性上。如果指定的时长个数小于属性个数，那么时长列表会重复。 如果时长列表更长，那么该列表会被裁剪。两种情况下，属性列表都保持不变。 属性值：以秒或者毫秒为单位 不接受负值，必须带单位。

transition-timing-function:css属性受到transition的影响，会产生不断变化的中间值，而css transition-timing-function属性用来描述 这个中间是怎样计算的。实质上，通过这个函数会建立一条加速度曲线，因此在整个transition变化过程中，变化速度可以不断改变。

默认值：ease

你可以规定多个timing function,通过使用transition-property属性，可以根据主列表（transition-property的列表）给每个css属性应用相应的timing function ；如果timing fucntion 的个数比主列表中数量少，缺少的值被设置为初始值（ease）。如果timing function 比主列表要多，timign functioin函数列表会被截断至合适的大小。这两种情况下声明的css属性都是有效的。

属性值：

1.ease：（加速然后减速）默认值，ease函数等同于贝塞尔曲线（0.25,0.1,0.25,1.0）。

2.linear:（匀速），linear函数等同于贝塞尔曲线（0.0,0.0,1。0,1.0）

3.ease-in：（加速），ease-in 函数等同于贝塞尔曲线（0.42,0,1.0,1.0）

4.ease-out：（减速），ease-out函数等同于贝塞尔曲线（0,0,0.58,1.0）

5.ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线（0.42,0,0.58,1.0）

6.cubic-bezier:贝塞尔曲线

7.step-start:等同于stteps(1,start)

​ step-end:等同于steps(1,end)

​ step(,[,[start|end]]?)

​ 第一个参数：必须为正整数，指定函数的步数

​ 第二个参数:指定每一步的值发生变化的时间点（默认值end）*/

代码示例：
 
    
    
    


    

过度的那些坑：

（1）transition在元素首次渲染还没有结束的情况下是不会被触发的

示例代码：
  
    
    


    
    
    

（2）指定的过度的属性的名称要一致

示例代码：
 
    
    


    

(3)简写属性顺序不能错