transition过渡效果

过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

帧动画：通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片

如下图:

在CSS3里使用transition可以实现补间动画（过渡效果），并且当前元素只要有“属性”发生变化时即存在两种状态(我们用A和B代指:也就是从A到B的形态发生变化），
就可以实现平滑的过渡，为了方便演示采用hover切换两种状态，但是并不仅仅局限于hover状态来实现过渡。

语法格式:

transition: 要过渡的属性(transition-property)  花费时间(transition-duration) 
            运动曲线(transition-timing-function)  何时开始(transition-delay)

transition: property duration timing-function delay;

如果有多组属性变化，还是用逗号隔开。

transition: width  0.5s ease-in 0s , height  0.5s ease-in-out 1.5s;
    | 属性                         | 描述                      |
    | -------------------------- | ----------------------- |
    | transition                 | 简写属性，用于在一个属性中设置四个过渡属性。  |
    | transition-property        | 规定应用过渡的 CSS 属性的名称。      | 
    | transition-duration        | 定义过渡效果花费的时间。默认是 0。      |
    | transition-timing-function | 规定过渡效果的时间曲线。默认是 "ease"。 | 
    | transition-delay           | 规定过渡效果何时开始。默认是 0。       |

所有的属性都变化过渡

transition: all 0.6s ease-out 0.1s;

运动曲线又分为

匀速:linear    |    逐渐慢下来:ease    |    加速:ease-in    |    减速:ease-out    |    先加速后减速:ease-in-out
如图:
    <img src="https://gitee.com/le-mon/img/raw/master/Essay/transition/3.png">

实例:

     div {
        width: 300px;
        height: 300px;
        background-color: #ddd;

        /* transition 语法格式: 过度属性,花费时间,运动曲线,何时开始 */
        /* 其中,过度属性必须填上,其他非必选 */
        /* transition: width  0.5s ease-in 0s , height  0.5s ease-in-out 1.5s; */
        /* 如果想要所有的属性都一起 */
        transition: all 0.6s ease-out 0.1s;
    }

    div:hover {
        width: 400px;
        height: 400px;
        background-color: #0f0;
    }