css transition
ease与ease-in-out的区别
两者的整体效果都是缓入缓出，只是细节上存在差异
| 贝塞尔曲线 | |
|---|---|
| ease | cubic-bezier(0.25, 0.1, 0.25,1) |
| ease-in-out | cubic-bezier(0.42, 0, 0.58, 1) |
比较两者的贝塞尔曲线，ease缓入效果较其缓出效果不明显；ease-in-out缓入缓出效果都比价明显
step-start 和step-end
step-start 等同于 steps(1, start), 过渡效果分一步完成，在步的起始开始，即直接过渡到效果
step-end 等同于 steps(1, end)， 过渡效果分一步完成，在步的结束开始，即transition-duration之后完成过渡效果
steps()
语法：steps(< integer >[, [ start | end ] ]?)
过渡步数为整数，第二个参数默认值为 end
start：表示过渡从第一步时间的开始开始(会直接看到过渡效果)
end：表示过渡从第一步时间的结束开始(不会直接看到过渡效果)
注意： transition-delay 将包含于步进函数的第一步，即第一步的持续时间为均分时间加上延迟时间
