flex布局（transition）

CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值

过渡触发事件：

给元素指定了transition属性，但并不会触发过渡效果，需要通过用户的行为触发，常用的行为有：

1. ：hover
2. ：active
3. ：focus
4. ：checked
5. @media

steps()

step函数指定了一个阶跃的过渡函数，第一个参数指定了时间函数中的间隔数量（必须是正整数）；第二个参数可选，接受 start 和 end 两个值，指定在每个间隔的起点或是终点发生阶跃变化，默认为 end。