CSS

梗概

  • animation-timing-function 属性规定动画的速度曲线。即因变量随时间的变化关系。但实际的时间快慢具体由 animation-duration 决定 animation-timing-function 属性可接受以下值:
  • ease - 指定从慢速开始,然后加快,然后缓慢结束的动画(默认)
  • linear - 规定从开始到结束的速度相同的动画
  • ease-in - 规定慢速开始的动画
  • ease-out - 规定慢速结束的动画
  • ease-in-out - 指定开始和结束较慢的动画
  • cubic-bezier(_n_,_n_,_n_,_n_) - 运行您在[use::cubic-bezier]中定义自己的值
  • steps(步数)
    • 阶梯式的突变
    • 示例:

1. 实例

下面这些例子展示了可以使用的一些不同速度曲线:

#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

亲自试d一试