From 310fd066e91f454b990372ffa30e803cc8120975 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:56:40 +0100 Subject: unslug zh-cn: move --- .../conflicting/web/css/easing-function/index.html | 266 +++++++++++++++++++++ 1 file changed, 266 insertions(+) create mode 100644 files/zh-cn/conflicting/web/css/easing-function/index.html (limited to 'files/zh-cn/conflicting/web/css/easing-function/index.html') diff --git a/files/zh-cn/conflicting/web/css/easing-function/index.html b/files/zh-cn/conflicting/web/css/easing-function/index.html new file mode 100644 index 0000000000..aef640fdd3 --- /dev/null +++ b/files/zh-cn/conflicting/web/css/easing-function/index.html @@ -0,0 +1,266 @@ +--- +title: +slug: Web/CSS/timing-function +tags: + - CSS + - timing-function +translation_of: Web/CSS/easing-function +translation_of_original: Web/CSS/timing-function +--- +

{{ CSSRef() }}

+ +

<timing-function> CSS 数据类型表示一个数学函数，它描述了在一个过渡或动画中一维数值的改变速度。这实质上让你可以自己定义一个加速度曲线，以便动画的速度在动画的过程中可以进行改变。这些函数通常被称为缓动函数。

+ +

这是一个表示时间输出比率的函数，表示为{{cssxref("<number>")}}，0, 0 代表初始状态，1, 1 代表终止状态。

+ +

输出比可以大于1.0（或者小于0.0）。这是因为在一种反弹效果中，动画是可以比最后的状态走的更远的，然后再回到最终状态。

+ +

不过，如果输出值超过了它允许的范围，比如组成一个颜色的值大于了255或者小于了0，这个值会被修改为允许范围内的最接近的值（在颜色值这个例子中分别为255和0）。一些贝塞尔曲线展示了这些性质。

+ +

定时函数

+ +
+

CSS 支持两种定时函数：立方贝塞尔曲线的子集和阶梯函数。这些函数中最有用的是一个关键字，可以很容易地引用它们。

+ +

cubic-bezier() 定时函数

+ + + + + + + + +
+

+ 		+

cubic-bezier() 定义了一条 立方贝塞尔曲线（cubic Bézier curve）。这些曲线是连续的，一般用于动画的平滑变换，也被称为缓动函数（easing functions）。

+ +

一条立方贝塞尔曲线需要四个点来定义，P0 、P1 、P2 和 P3。P0 和 P3 是起点和终点，这两个点被作为比例固定在坐标系上，横轴为时间比例，纵轴为完成状态。P0 是 (0, 0)，表示初始时间和初始状态。P3 是 (1, 1) ，表示终止时间和终止状态。

+ +

并非所有的三次贝塞尔曲线都适合作为计时函数，也并非所有的曲线都是数学函数，即给定横坐标为0或1的曲线。在CSS定义的P0和P3固定的情况下，三次贝塞尔曲线是一个函数，因此，当且仅当P1和P2的横坐标都在[0,1]范围内时，三次贝塞尔曲线是有效的。

+ +

三次贝塞尔曲线的 P1或 P2坐标超出[0, 1] 范围可能会产生弹跳效果。

+ +

当指定的三次贝塞尔曲线无效时，CSS将忽略整个属性。

+
+
+ +

语法

+ +
cubic-bezier(x1, y1, x2, y2)
+
+ +

其中，

+ +
+
x1, y1, x2, y2是<number>类型的值，它们代表当前定义立方贝塞尔曲线中的P1 和 P2点的横坐标和纵坐标，X1和X2必须在[0，1]范围内，否则当前值无效。
+
Are {{cssxref("<number>")}} values representing the abscissas and ordinates of the P1 and P2 points defining the cubic Bézier curve. x1 and x2 must be in the range [0, 1] or the value is invalid.
+
+ +

示例

+ +

CSS 中允许使用这些贝塞尔曲线：

+ +
cubic-bezier(0.1, 0.7, 1.0, 0.1)   The canonical Bézier curve with four <number> in the [0,1] range.
+cubic-bezier(0, 0, 1, 1)           Using <integer> is valid as any <integer> is also a <number>.
+cubic-bezier(0.3, -1.9, 2.1, -0.2) Negative values for ordinates are valid, leading to bouncing effects.
+cubic-bezier(0.1, 4, 0.6, 2.45)    Values > 1.0 for ordinates are also valid.
+ +

像这些贝塞尔曲线的定义是无效的：

+ +
cubic-bezier(0.1, red, 1.0, green) Though the animated output type may be a color, Bézier curves work w/ numerical ratios.
+cubic-bezier(-0.2, 0.6, -0.1, 0)   Abscissas must be in the [0, 1] range or the curve is not a function of time.
+cubic-bezier(0.3, 2.1)             The two points must be defined, there is no default value.
+cubic-bezier(1.1, 0, 4, 0)         Abscissas must be in the [0, 1] range or the curve is not a function of time.
+
+ +

The steps() class of timing-functions

+ + + + + + + + + + + + + +
+ + + + + + + +
+

steps() 定义了一个以等距步长划分值域的步长函数。这个阶跃函数的子类有时也称为阶梯函数。

+
+
steps(2, start)steps(4, end)
+ +

Syntax

+ +
steps(number_of_steps, direction)
+
+ +

where :

+ +
+
number_of_steps
+
Is a strictly positive {{cssxref("<integer>")}} representing the amount of equidistant treads composing the stepping function.
+
direction
+
Is a keyword indicating if it the function is left- or right-continuous: +
    +
  • start denotes a left-continuous function, so that the first step happens when the animation begins;
    • +
  • end denotes a right-continuous function, so that the last step happens when the animation ends.
    • +
+
+
+ +

Examples

+ +

These timing functions are valid :

+ +
steps(5, end)          There is 5 treads, the last one happens right before the end of the animation.
+steps(2, start)        A two-step staircase, the first one happening at the start of the animation.
+
+ +

These timing function are invalid :

+ +
steps(2.0, end)        The first parameter must be an <integer> and cannot be a real value, even if it is equal to one.
+steps(-3, start)       The amount of steps must be non-negative.
+steps(0, end)          There must be at least one step.
+steps(2)               The second parameter is not optional.
+steps(start, 3)        Though of different types, the order of parameter is important.
+step(1, end)           Even if there is one step, the function name is steps, with the plural 's'
+steps(3 end)           The two parameters must be separated with a comma; one or several spaces is not enough.
+
+ +

常用定时函数关键字

+ +

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)。使用这个定时函数，动画会一直保持初始状态直到动画结束，然后立刻跳转到结束状态。

+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Transitions', '#transition-timing-function', '<timing-function>') }}{{ Spec2('CSS3 Transitions') }}Defined anonymously
{{ SpecName('CSS3 Animations', '#animation-timing-function', '<timing-function>') }}{{ Spec2('CSS3 Animations') }}Defined anonymously, says to see definition in the CSS Transitions Module
+ +

浏览器兼容性

+ +

{{Compat("css.types.timing-function", 2)}}

+ +

相关链接

+ + -- cgit v1.2.3-54-g00ecf