定时功能 | <timing-function>
<single-transition-timing-function>?CSS?数据类型表示一个数学函数，它描述了在一个过渡或动画中一维数值的改变速度。这实质上让你可以自己定义一个加速度曲线，以便动画的速度在动画的过程中可以进行改变, 这些函数通常被称为缓动函数。
这是一个表示时间输出比率的函数，表示为<number>，0.0代表初始状态，1.0?代表终止状态。
输出比可以大于1.0（或者小于0.0）。这是因为在一种反弹效果中，动画是可以比最后的状态走的更远的，然后再回到最终状态。
尽管如此，如果输出值超出其可能的范围，例如颜色大于255或小于的分量0，则将该值限制为其最接近的允许值（在颜色分量255和0分别的情况下）。一些cubic-bezier()曲线显示这个属性。
值
CSS 支持两种时间函数：立方贝塞尔曲线（cubic Bézier curves）的子集和阶梯函数。最有用的函数是易于使用的关键字。
cubic-bezier()?时间函数
cubic-bezier()?定义了一条?立方贝塞尔曲线（cubic Bézier curve）。这些曲线是连续的，一般用于动画的平滑变换，也被称为缓动函数（easing functions）。
一条立方贝塞尔曲线需要四个点来定义，P0?、P1?、P2?和?P3，P0?和 P3?是起点和终点，这两个点被作为比例固定在坐标系上，横轴为时间比例，纵轴为完成状态。P0?是?(0,?0)，表示初始时间和初始状态。P3?是?(1,?1)?，表示终止时间和终止状态。
不是所有的三次Bézier曲线都适合作为定时函数，因为并不是所有的都是数学函数。即对于给定的横坐标具有零个或一个值的曲线。如果P0和P3固定为CSS定义，则三次Bézier曲线是一个函数，因此当且仅当P1和P2的横坐标均在该[0, 1]范围内时才是有效的。
P1或P2纵坐标的三次贝塞尔曲线[0, 1]可能会产生弹跳效应。
当你指定一个无效的cubic-bezier曲线时，CSS忽略整个属性。
语法
cubic-bezier(x1, y1, x2, y2)哪里：
x1， y1， x2， _ y2 _<number>表示横坐标，P1和P2点的纵坐标定义三次Bézier曲线。x1和x2必须在0,1范围内，否则该值无效。
示例
CSS中允许使用这些贝塞尔曲线：
/* The canonical Bézier curve with four <number> in the [0,1] range. */
cubic-bezier(0.1, 0.7, 1.0, 0.1)
/* Using <integer> is valid as any <integer> is also a <number>. */
cubic-bezier(0, 0, 1, 1)
/* Negative values for ordinates are valid, leading to bouncing effects.*/
cubic-bezier(0.1, -0.6, 0.2, 0)
/* Values > 1.0 for ordinates are also valid. */
cubic-bezier(0, 1.1, 0.8, 4)这些三次贝塞尔曲线的定义是无效的：
/* Though the animated output type may be a color,
Bézier curves work w/ numerical ratios.*/
cubic-bezier(0.1, red, 1.0, green)
/* Abscissas must be in the [0, 1] range or
the curve is not a function of time. */
cubic-bezier(2.45, 0.6, 4, 0.1)
/* The two points must be defined, there is no default value. */
cubic-bezier(0.3, 2.1)
/* Abscissas must be in the [0, 1] range or
the curve is not a function of time. */
cubic-bezier(-1.9, 0.3, -0.2, 2.1) steps()定时功能的类
steps()函数表示法定义了一个阶跃函数除以输出值的域在等距离的步骤。
这个阶梯函数的子类有时也被称为阶梯函数。
steps(2, start)
steps(4, end)
语法
steps(number_of_steps, direction)哪里：
number_of_steps是严格正数<integer>，表示构成步进函数的等距距离的数量.direction是指示函数是左连续的还是右连续的关键字：
start表示一个左连续函数，这样动画开始时就会发生第一步;
end表示一个右连续函数，以便动画结束时最后一步的发生。
end 是默认的。
示例
这些定时功能是有效的：
/* There is 5 treads, the last one happens
right before the end of the animation. */
steps(5, end)
/* A two-step staircase, the first one happening
at the start of the animation. */
steps(2, start)
/* The second parameter is optional. */
steps(2) 这些定时功能无效：
/* The first parameter must be an <integer> and
cannot be a real value, even if it is equal to one. */
steps(2.0, end)
/* The amount of steps must be non-negative. */
steps(-3, start)
/* There must be at least one step.*/
steps(0, end) 定时功能的frames()类
注意：frame（）计时功能的名称目前正在讨论中，因此在确定之前，它目前在浏览器发布版本中是不可用的。
frames（）函数符号定义了将输出值的域划分为等距间隔的帧函数。 frames（）和steps（）之间的区别在于frame（），start（0％）和end（100％）状态时间与其他间隔的时间是相等的。
frames(2), frames(4)
语法
frames(number_of_frames)哪里:
number_of_frames是严格正数<integer>，表示构成步进函数的等距间隔的数量。
示例
这些定时功能是有效的：
/* The parameter is a positive integer. */
frames(10) 注意：您可以在我们的GitHub中使用frames（）函数查看工作过渡示例。
这些定时功能无效：
/* The parameter must be an <integer> and
cannot be a real value, even if it is equal to one. */
frames(2.0)
/* The amount of frames must be non-negative. */
frames(-3)
/* There must be at least two frames.*/
frames(0) 常见计时功能的关键词
linear
这个关键字代表了计时功能cubic-bezier(0.0, 0.0, 1.0, 1.0)。使用这个定时功能，动画以恒定的速度从其初始状态到最终状态。
ease
这个关键字代表了计时功能cubic-bezier(0.25, 0.1, 0.25, 1.0)。这个功能类似于ease-in-out，虽然开始时加速比较急剧，但在时间到了一半之前开始减速，并且慢慢减缓。
ease-in
这个关键字代表了计时功能cubic-bezier(0.42, 0.0, 1.0, 1.0)。动画开始缓慢，然后逐渐加速，直到达到最终状态，动画突然停止。
ease-in-out
这个关键字代表了计时功能cubic-bezier(0.42, 0.0, 0.58, 1.0)。使用此计时功能，动画开始缓慢，加速更快，然后在接近其最终状态时变慢。在开始时，它与ease-in功能类似; 最后时，与ease-out功能类似。
ease-out
这个关键字代表了计时功能cubic-bezier(0.0, 0.0, 0.58, 1.0)。动画开始迅速，然后在接近最终状态时放慢速度。
step-start
这个关键字代表了计时功能steps(1, start)。使用这个定时功能，动画立即跳转到结束状态并保持在该位置直到动画结束。
step-end
这个关键字代表了计时功能steps(1, end)。使用这个定时功能，动画保持其初始状态直到结束，直接跳到最终位置。
规范
Specification | Status | Comment |
|---|---|---|
CSS AnimationsThe definition of '<single-transition-timing-function>' in that specification. | Working Draft | Defines <single-timing-function> as synonym for <single-transition-timing-function> of CSS Transitions Module. |
CSS TransitionsThe definition of '<single-transition-timing-function>' in that specification. | Working Draft | Initial definition |
浏览器兼容性
Feature | Firefox (Gecko) | Chrome | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
Basic support | 4.0 (2.0) | 4.0 | 10.0 | 10.5 | 3.1 |
cubic-bezier() with ordinate ? 0,1 | 4.0 (2.0) | 16.0 | 10.0 | 12.1 | Nightly build |
steps() | 4.0 (2.0) | 8.0 | 10.0 | 12.1 | 5.1 |
frames() | No support1 | No support1 | No support | No support1 | ? |
Feature | Firefox Mobile (Gecko) | Android | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
Basic support | 4.0 (2.0) | 4.0 | No support | 10.0 | 2.0 |
cubic-bezier() with ordinate ? 0,1 | 4.0 (2.0) | (Yes) | No support | ? | ? |
steps() | 4.0 (2.0) | 4.0 | No support | ? | 5.0 |
frames() | No support1 | ? | No support | No support | ? |
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
