CSS3过渡（transiition）

为一个元素在不同样式之间变化自动添加“补间动画”

优点：动画更细腻，内存开销小

/* 过渡：什么属性要过渡{宽} 动画时长(必须以秒为单位){1秒} 变化速度曲线{匀速} 延迟时间(s不可省略)*/
transition: width 1s linear 0s;

可以参与过渡的属性

1. 所有数值类型的属性，eg：width、height、left、top、border-radius
2. 背景颜色和文字颜色
3. 所有变形（包括2D和3D）

如果要所有属性都参与过渡，可以写all

transition: all 1s linear 0s;

过渡的四个小属性

属性	意义
transition-property	哪些属性要过渡
transition-duration	动画时间
transition-timing-function	动画变化曲线（缓动效果）
transition-delay	延迟时间

缓动参数（transition-timing-function）

transition: left 5s linear 0s;
transition-timing-function: ease;
transition-timing-function: ease-in;
transition-timing-function: ease-out;
transition-timing-function: ease-in-out;
/* 贝塞尔曲线：http://cubic-bezier.com/ 可以自定义动画缓动参数 */
transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);