animation-timing-function

语法：

animation-timing-function：<single-animation-timing-function>[,<single-animation-timing-function>]*

<single-animation-timing-function> = ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<integer>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>)

默认值：ease

适用于：所有元素，包含伪对象:after和:before

继承性：无

动画性：否

计算值：指定值

媒体：视觉

取值：

linear：
线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease：
平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
ease-in：
由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out：
由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
ease-in-out：
由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
step-start：
等同于 steps(1, start)
step-end：
等同于 steps(1, end)
steps(<integer>[, [ start | end ] ]?)：
接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。
cubic-bezier(<number>, <number>, <number>, <number>)：
特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内

说明：

检索或设置对象动画的过渡类型
  • 如果提供多个属性值，以逗号进行分隔。
  • 对应的脚本特性为animationTimingFunction。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE Edge Firefox Chrome Safari Opera iOS
Safari		 Android
Browser		 Blackberry
Browser		 Opera
Mobile		 Chrome
for
Android		 Firefox
for
Android		 IE
Mobile		 UC
Browser
for
Android		 Samsung
Internet		 QQ
Browser		 Baidu
Browser
5.5-9 12+ 2-4 4-42 -webkit- 3.1-3.2 9-11.6 3.2-5.1 -webkit- #1 2.1-3 -webkit- #1 7-10 -webkit- 10-12 61 56 10+ 11.4 -webkit- 4+ 1.2 -webkit- 7.12
10+ 5-15 -moz- 43+ 4-5 -webkit- #2 12 -o- 6.0-8.4 -webkit- 4-4.4.4 -webkit- 12.1+
16+ 5.1-8 -webkit- 12.1 9.0+
9+ 15-29 -webkit-
30+
  1. 部分浏览器不支持伪元素动画，或者支持得不够好，尽可能不要利用伪元素来做动画

示例：