CSS参考手册
动画和转换 | Animations & Transitions
定时功能 |
<single-transition-timing-function> CSS 数据类型表示一个数学函数，它描述了在一个过渡或动画中一维数值的改变速度。这实质上让你可以自己定义一个加速度曲线，以便动画的速度在动画的过程中可以进行改变, 这些函数通常被称为缓动函数。
这是一个表示时间输出比率的函数，表示为<number>，0, 0代表初始状态，1, 1 代表终止状态。
输出比可以大于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 |
? |
动画和转换 | Animations & Transitions相关
层叠样式表（ Cascading Style Sheets ）是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
加载中,请稍侯......