transition实现过渡动画

transition:property duration timing-function delay;

• transition-property：规定设置过渡效果的CSS属性的名称（有数值的属性才可以进行过渡）；
• transition-duration：规定完成过渡效果需要的时间；
• transition-timing-function：规定速度效果的速度曲线；
• timing-delay：定义过渡效果开始的时间；

transition-timing-function：规定速度效果的速度曲线；

transition-timing-function：linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n);

• linear：匀速   相当于cubic-bezier(0,0,1,1)
• ease：慢快慢   相当于cubic-bezier(0.25,0.1,0.25,0.1)
• ease-in：慢速开始的过渡   相当于cubic-bezier(0.45,0.,1,1)
• ease-out：慢速结束的过渡  相当于cubic-bezier(0,0.,0.58,1)
• ease-in-out：慢速开始和结束的过渡   相当于cubic-bezier(0.45,0.,0.58,1)
• cubic-bezier(n,n,n,n)：在cubic-bezier函数中定义自己的值。可能的值是0~1之间的数值