CSS transition-timing-function属性，定义速度曲线
transition-timing-function属性
CSS中的transition-timing-function属性，可单独设置HTML元素某一属性过渡动画效果的速度曲线，该属性可以让过渡的效果的速度随时间的改变而改变。
语法
transition-timing-function:value
可选属性值
| 属性值 | 描述 |
|---|---|
| linear | 以相同速度过渡效果，相当于cubic-bezier(0,0,1,1) |
| ease | 先慢后快，再慢慢结束的过渡效果，相当于cubic-bezier(0.25,0.1,0.25,1) |
| ease-in | 以慢速开始的过渡效果，相当于cubic-bezier(0.42,0,1,1) |
| ease-out | 以慢速结束的过渡效果，相当于cubic-bezier(0,0,0.58,1) |
| ease-in-out | 以慢速开始和结束的过渡效果，相当于cubic-bezier(0.42,0,0.58,1) |
| cubic-bezier(n,n,n,n) | 自定义，n的直介于0到1之间 |
transition-timing-function实例代码，及在线编辑器
<div id='d1'></div>
<style>
#d1{width:50px;height:50px;background-color:green;transition-property:height;transition-duration:2s;transition-timing-function:ease;margin-top:5%;}
#d1:hover{height:300px;}
</style>