介绍

表示一个数学函数，描述数值变化的速率。

• 可以用来描述值在动画过程中变化的速度。
• 可以让你在动画持续时间内改变动画的速度。
• 可以用于在颜色渐变中的两种颜色之间进行插值。

三种类型的值

系统预定义

• 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为 默认值。

示例：

分三段执行的动画。