* {
    margin: 0;
    padding: 0;
}
#box {
    width: 200px;
    height: 200px;
    background: #00f;
    transition: width 2s linear 1s;
}

/*  
    transition主要包含四个属性值：
    transition-property:all   表示要参与过渡的属性  all是默认值
    transition-duration:3s   表示动画持续的时长和速度曲线  默认值0（时长决定速度）
    transition-timing-function:linear  动画运动的方式类型
       ease：默认值	规定慢速开始，然后变快，然后慢速结束的过渡效果
       linear:匀速运动  
       ease-in:表示由慢到快  
       ease-out:表示由快到慢 
       ease-in-out:规定以慢速开始和结束的过渡效果
       cubic-bezier(n,n,n,n) 三次贝塞尔曲线
    transition-delay:1s    动画的延迟时间
    IOS下safari渲染transition时出现闪屏问题，解决方法：
        backface-visibility:hidden;背面可见度
        display:none;的元素并不支持css3动画
*/