过渡

.box {
    width: 100px;
    height: 100px;
    background: #aaa;
    transition: width 2s linear 1s;
}
/*鼠标滑上box盒子上1s后执行，在2秒内让其宽度从100px匀速变成300px*/
.box:hover {
    width: 300px;
}

transition: property duration timing-function delay 

property表示 规定设置过度效果的css属性名称

 duration 时间 规定完成过度效果需要多少秒或毫秒

 timing-function 指定过度函数，规定速度效果的速度曲线
   ease 默认值，表示样式从初始状态过度到终止状态时速度由快到慢，逐渐变慢
     linear 元素样式从初始状态过渡到终止状态速度是恒速
     ease-in 元素从初始状态过渡到终止状态时，速度越来越快，呈一种加速状态常称这种效果为渐显效果
     ease-out 元素样式从初始状态过度到终止状态时，速度越来越慢，减速状态
     ease-in-out 元素样式从初始状态到终止状态时，先加速度再减速。常成这种效果为渐显渐隐效果

delay 指定开始出现的延迟时间