CSS animation-timing-function属性
animation-timing-function属性
CSS动画的animation-timing-function属性，用于设置@keyframes定义的动画的速度变化曲线。
语法
animation-timing-function:value;
可选属性值
| 属性值 | 描述 |
|---|---|
| linear | 匀速 |
| ease | 默认，以低速开始，中间段加快，结束前低速 |
| ease-in | 以慢速开始 |
| ease-out | 以慢速结束 |
| ease-in-out | 以慢速开始和结束 |
| cubic-bezier(n,n,n,n) | 自定义，n的直介于0到1之间 |
animation-timing-function实例代码，及在线编辑器
<div id='d1'></div>
<style>
@keyframes widthChange{
from{width:20%;}
to{width:100%;}
}
#d1{animation-name:widthChange;animation-iteration-count:infinite;animation-duration:1s;width:20%;height:30%;border:1px solid orange;animation-timing-function:ease-in-out;}
</style>