CSS3中的过渡效果（transition）

示例：1. 过渡(CSS3) transition

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

帧动画大家可知道是什么含义，帧动画即通过一帧一帧的画面按照固定顺序和速度播放。

那么过渡（transition）则可以进行补帧，使动画效果更平滑的展示在页面上。

语法格式:

transition: 要过渡的属性  花费时间  运动曲线  何时开始;
如果有多组属性变化，用逗号隔开
如果想要所有的属性都变化过渡， 在属性位置写一个all 就可以

transition属性

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

示例：

div {
    width: 200px;
    height: 100px;
    background-color: pink;
    transition-property: width height;
    transition-duration: 1s;
    /* 匀速 */
    transition-timing-function: linear;
    /* 缓慢 */
    transition-timing-function: ease; 
    /* 加速 由慢到快 */
    transition-timing-function: ease-in; 
    /* 快慢快 */
    transition-timing-function: ease-in-out; 
    transition-delay: 0s;
}
div:hover {  
    width: 600px;
    height: 300px
}

简写属性：

​div {
    width: 200px;
    height: 100px;
    background-color: pink;
    transition: width 0.6s ease 0s, height 0.3s ease-in 1s;
}
div:hover {  
    width: 600px;
    height: 300px
}

​