transition
transition-property（过渡的元素）
transition-property: none | all | property; //选择需要过渡的属性名
// none：没有属性改变
// all：所有属性改变（默认值）
//property：元素属性名
//如颜色过渡：从绿色过渡到红色
transition-property: color;
//如透明过渡：从0%到100%
transition-property: opcity;
//使用transition，必须得有事件的发生，比如点击 或者 鼠标经过等。
transition-duration（过渡的时间）
transition-duration: time; //动画过渡的时间控制，默认值是0，time可以是3s、6s或67ms、99ms等。
transition-timing-function（过渡的方式）
transition-timing-function: ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | …;//动画过渡的快慢控制，默认是ease。
// ease：平滑过渡。等同于贝塞尔曲线（0.0,0.0,1.0,1.0）默认值
// linear：线性过渡。等同于贝塞尔曲线（0.25,0.1,0.25,1.0）
// ease-in：由慢到快。等同于贝塞尔曲线（0.42,0,1.0,1.0）
// ease-out：由快到慢。等同于贝塞尔曲线（0，0，0.58，1.0）
//ease-in-out：由慢到快再到慢。等同于贝塞尔曲线（0.42,0,0.58,1.0）
//step-start：等同于steps(1,start)
//step-end：等同于steps(1,end)
//steps(<integer> [, [start | end] ]?) 接收两个参数的步进函数
第一个参数：必须为正整数，指定函数的步数
第二个参数：取值可以是start或end，指定每一步的值发生变化的时间点（可选，默认值为end）
//cubic-bezier(<number>,<number>,<number>,<number>) 特定的贝塞尔曲线类型，4个值需在[0,1]之间。
transition-delay（过渡的延迟）
transition-delay:time; //动画过渡前的时间延迟，默认值是0，time可以是3s、6s或67ms、99ms等。
transition的简写：
transition: property transition-duation transition-timing-function transitionn-delay;