介绍
表示一个数学函数，描述数值变化的速率。
- 可以用来描述值在动画过程中变化的速度。
- 可以让你在动画持续时间内改变动画的速度。
- 可以用于在颜色渐变中的两种颜色之间进行插值。
三种类型的值
系统预定义
-
linear：动画从头到尾的速度是相同的。 -
ease：默认。动画以低速开始，然后加快，在结束前变慢。 -
ease-in：动画以低速开始。 -
ease-out：动画以低速结束。 -
ease-in-out：动画以低速开始和结束。
三次贝塞尔曲线函数 动画
-
cubic-bezier(x1,y1,x2,y2)：两个坐标的取值范围都是[0,1]，系统预定义动画是基于此函数来实现的。
-
x轴：代表动画效果的所用的时间。 -
y轴：代表动画效果的变化的过程。
比如我们拿 一条线段的在2s内，长度 从 50px 变化到 100px 的动画 为例。
黑色的线：意味着，线段在 2s内的长度变化 是 匀速的变长的。绿色的线：意味着，线段在 2s内的长度变化 是 由慢到快变长的。
因为，在第1s内，随着x轴时间的匀速增加，y轴的变化比率增加的比较小，代表线段的长度增加的比较慢；在第2s内，随着x轴时间的匀速增加， y轴的变化比率增加的比较大，代表线段的长度增加的比较快，黄色的线：意味着，线段在 2s内的长度变化 是 由快到慢变长的。跟绿色的线相反。蓝色的线：意味着，线段在 2s内的长度变化 是 先慢到快 在快到慢变长的。可根据绿色和黄色的虚线推断出来。紫色的线：意味着，线段在 2s内的长度变化 是 先快速变长 后匀速变短 再快速变长到最大值。类似于弹性的效果。
- 根据图所示，我们也就印证了，系统预定义动画是基于此函数来实现的。
-
linear：对应cubic-bezier(0,0,1,1) -
ease：对应cubic-bezier(0.25, 0.1, 0.25, 1.0) -
ease-in：对应cubic-bezier(0.42, 0.0, 1.0, 1.0)。 -
ease-out：对应cubic-bezier(0.42, 0.0, 0.58, 1.0)。 -
ease-in-out：对应cubic-bezier(0.0, 0.0, 0.58, 1.0)。
阶跃函数、逐帧动画
-
steps(n, start | end)：定义了一个阶跃函数，将输出值的值域划分为等距的步长。是transition-timing-function和animation-timing-function两个属性的属性值，他是表示两个关键帧之间的动画效果，默认是ease。
语法：
steps(number_of_steps, direction)
参数一：是把动画分成几段，这几段其实是在时间上分为几段去显示执行。
-
参数二：表示函数是左连续还是右连续，有两个可选值
start和end，默认是end`。-
jump-start：表示左连续函数。表示动画开始，元素出现在动画的结束位置上，然后一步一步的执行动画; -
jump-end：表示右连续函数，表示动画开始，元素出现在动画的开始位置上，然后一步一步的执行动画; -
both：表示右、左连续函数，在0%和100%标记处都有暂停，实际上是在动画迭代过程中增加了一个步骤; -
jump-none：两端都没有跳转。相反，同时保持0%标记和100%标记，每个持续时间为1/n -
Start：等同于jump-start。 -
End：等价于jump-end。End为 默认值。
-
示例：
分三段执行的动画。
效果：
