animation-timing-function

animation-timing-function CSS 属性设置动画在每个周期的持续时间内如何进行。

尝试一下

使用简写属性 animation 一次性设置所有动画属性通常很方便。

语法

css

/* 关键字值 */
animation-timing-function: ease;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;
animation-timing-function: linear;
animation-timing-function: step-start;
animation-timing-function: step-end;

/* 函数值 */
animation-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1);
animation-timing-function: steps(4, end);

/* Steps 函数关键字 */
animation-timing-function: steps(4, jump-start);
animation-timing-function: steps(10, jump-end);
animation-timing-function: steps(20, jump-none);
animation-timing-function: steps(5, jump-both);
animation-timing-function: steps(6, start);
animation-timing-function: steps(8, end);

/* 多个动画 */
animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1, 0.1);

/* 全局值 */
animation-timing-function: inherit;
animation-timing-function: initial;
animation-timing-function: revert;
animation-timing-function: revert-layer;
animation-timing-function: unset;

备注: 当你在 animation-* 属性上指定多个以逗号分隔的值时,它们将根据值的数量以不同的方式分配给 animation-name 属性中指定的动画。有关更多信息,请参阅设置多个动画属性值

<easing-function>

animation-name 确定动画对应的缓动函数。

非阶跃(non-step)关键字值(如 ease、linear、ease-in-out 等)代表了固定的四点值的三次贝塞尔曲线,而 cubic-bezier() 函数允许使用非预定义值。而阶跃时间函数将输入时间分成一定数量相等的间隔,由步数和步骤位置定义。

ease

等同于 cubic-bezier(0.25, 0.1, 0.25, 1.0),即默认值,表示动画在中间加速,在结束时减速。。

linear

等同于 cubic-bezier(0.0, 0.0, 1.0, 1.0),表示动画以匀速运动。

ease-in

等同于 cubic-bezier(0.42, 0, 1.0, 1.0),表示动画一开始较慢,随着动画属性的变化逐渐加速,直至完成。

ease-out

等同于 cubic-bezier(0, 0, 0.58, 1.0),表示动画一开始较快,随着动画的进行逐渐减速。

ease-in-out

等同于 cubic-bezier(0.42, 0, 0.58, 1.0),表示动画属性一开始缓慢变化,随后加速变化,最后再次减速变化。

cubic-bezier(p1, p2, p3, p4)

开发者自定义的三次贝塞尔曲线,其中 p1 和 p3 的值必须在 0 到 1 的范围内。

steps(n, <jumpterm>)

按照 n 个定格在过渡中显示动画迭代,每个定格等长时间显示。例如,如果 n 为 5,则有 5 个步骤。动画是否在 0%、20%、40%、60% 和 80% 处或 20%、40%、60%、80% 和 100% 处暂停,或者在动画的 0% 和 100% 之间设置 5 个定格,又或是在包括 0% 和 100% 的情况下设置 5 个定格(在 0%、25%、50%、75% 和 100% 处)取决于使用以下跳跃项之一:

jump-start

表示一个左连续函数,因此第一个跳跃发生在动画开始时。

jump-end

表示一个右连续函数,因此最后一个跳跃发生在动画结束时。

jump-none

两端都没有跳跃。相反,在 0% 和 100% 标记处分别停留,每个停留点的持续时间为总动画时间的 1/n。

jump-both

在 0% 和 100% 标记处停留,有效地在动画迭代过程中添加一个步骤。

start

等同于 jump-start

end

等同于 jump-end

step-start

等同于 steps(1, jump-start)

step-end

等同于 steps(1, jump-end)

描述

@keyframes 规则中,可以在单个关键帧上指定时间函数。如果没有在关键帧上指定 animation-timing-function,则该关键帧将使用应用动画的元素的 animation-timing-function 属性相应的值。

在关键帧内,animation-timing-function 是一个 at-rule-specific 描述符,而不是同名的属性。时间并没有被动画化。相反,关键帧的时间函数会在逐个属性的基础上应用,从指定该函数的关键帧开始,直到下一个指定该属性的关键帧,或者直到动画结束(如果没有后续关键帧指定该属性)。因此,在 100%to 关键帧上指定的 animation-timing-function 永远不会被使用。

形式定义

初始值ease
适用元素all elements, ::before and ::after pseudo-elements
是否是继承属性
计算值as specified
Animation typeNot animatable

形式语法

animation-timing-function = 
<easing-function>#

<easing-function> =
linear |
<linear-easing-function> |
<cubic-bezier-easing-function> |
<step-easing-function>

<linear-easing-function> =
linear( <linear-stop-list> )

<cubic-bezier-easing-function> =
ease |
ease-in |
ease-out |
ease-in-out |
cubic-bezier( <number [0,1]> , <number> , <number [0,1]> , <number> )

<step-easing-function> =
step-start |
step-end |
steps( <integer> [, <step-position> ]? )

<linear-stop-list> =
[ <linear-stop> ]#

<step-position> =
jump-start |
jump-end |
jump-none |
jump-both |
start |
end

<linear-stop> =
<number> &&
<linear-stop-length>?

<linear-stop-length> =
<percentage>{1,2}

示例

三次贝塞尔示例

css

.ease {
  animation-timing-function: ease;
}
.easein {
  animation-timing-function: ease-in;
}
.easeout {
  animation-timing-function: ease-out;
}
.easeinout {
  animation-timing-function: ease-in-out;
}
.linear {
  animation-timing-function: linear;
}
.cb {
  animation-timing-function: cubic-bezier(0.2, -2, 0.8, 2);
}

阶跃动画示例

css

.jump-start {
  animation-timing-function: steps(5, jump-start);
}
.jump-end {
  animation-timing-function: steps(5, jump-end);
}
.jump-none {
  animation-timing-function: steps(5, jump-none);
}
.jump-both {
  animation-timing-function: steps(5, jump-both);
}
.start {
  animation-timing-function: steps(5, start);
}
.end {
  animation-timing-function: steps(5, end);
}
.step-start {
  animation-timing-function: step-start;
}
.step-end {
  animation-timing-function: step-end;
}

规范

Specification
CSS Animations Level 1
# animation-timing-function

浏览器兼容性

BCD tables only load in the browser

参见