定时功能 | <timing-function>

<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)。使用这个定时功能，动画保持其初始状态直到结束，直接跳到最终位置。

规范

浏览器兼容性