w3study.net

CSS transition-timing-function 属性设置如何计算受过渡效果影响的 CSS 属性的中间值。

{{InteractiveExample("CSS 演示：transition-timing-function")}}

```css interactive-example-choice transition-timing-function: linear;

```css interactive-example-choice
transition-timing-function: ease-in;

```css interactive-example-choice transition-timing-function: steps(6, end);

```css interactive-example-choice
transition-timing-function: cubic-bezier(0.29, 1.01, 1, -0.68);

```html interactive-example

悬停以查看
过渡。

```css interactive-example
#example-element {
  background-color: #e4f0f5;
  color: black;
  padding: 1rem;
  border-radius: 0.5rem;
  font: 1em monospace;
  width: 100%;
  transition: margin-right 2s;
}

#default-example:hover > #example-element {
  background-color: #990099;
  color: white;
  margin-right: 40%;
}

这条加速度曲线被 {{cssxref("<easing-function>")}} 所定义，之后作用到每个 CSS 属性的过渡。

你可以规定多个缓动函数，通过使用 {{cssxref("transition-property")}} 属性，可以根据主列表（transition-property 的列表）给每个 CSS 属性应用相应的缓动函数。如果缓动函数的个数比主列表中数量少，缺少的值被设置为初始值（ease） 。如果缓动函数比主列表要多，缓动函数函数列表会被截断至合适的大小。这两种情况下声明的 CSS 属性都是有效的。

语法

/* Keyword values */
transition-timing-function: ease;
transition-timing-function: ease-in;
transition-timing-function: ease-out;
transition-timing-function: ease-in-out;
transition-timing-function: linear;
transition-timing-function: step-start;
transition-timing-function: step-end;

/* Function values */
transition-timing-function: steps(4, jump-end);
transition-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1);

/* Steps Function keywords */
transition-timing-function: steps(4, jump-start);
transition-timing-function: steps(10, jump-end);
transition-timing-function: steps(20, jump-none);
transition-timing-function: steps(5, jump-both);
transition-timing-function: steps(6, start);
transition-timing-function: steps(8, end);

/* Multiple timing functions */
transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1, 0.1);

/* Global values */
transition-timing-function: inherit;
transition-timing-function: initial;
transition-timing-function: revert;
transition-timing-function: revert-layer;
transition-timing-function: unset;

值

• <timing-function>
  • : 通过 {{cssxref("transition-property")}} 中定义被过渡属性，每个 {{cssxref("<easing-function>")}} 的值代表与这个属性相对应的缓动函数。

形式定义

{{CSSInfo}}

形式语法

{{csssyntax}}

示例

三次方贝塞尔曲线示例

```html hidden

```css hidden
.parent {
}
.parent > div[class] {
  width: 12em;
  min-width: 12em;
  margin-bottom: 4px;
  background-color: black;
  border: 1px solid red;
  color: white;
  transition-property: all;
  transition-duration: 7s;
}
.parent > div.box1 {
  width: 90vw;
  min-width: 24em;
  background-color: magenta;
  color: yellow;
  border: 1px solid orange;
  transition-property: all;
  transition-duration: 2s;
}

```js hidden function updateTransition() { const els = document.querySelectorAll(".parent > div[class]"); for (let i = 0; i < els.length; i++) { els[i].classList.toggle("box1"); } }

const intervalID = setInterval(updateTransition, 10000);

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

{{EmbedLiveSample("三次方贝塞尔曲线示例")}}

step 示例

```html hidden

```css hidden
.parent {
}
.parent > div[class] {
  width: 12em;
  min-width: 12em;
  margin-bottom: 4px;
  background-color: black;
  border: 1px solid red;
  color: white;
  transition-property: all;
  transition-duration: 7s;
}
.parent > div.box1 {
  width: 90vw;
  min-width: 24em;
  background-color: magenta;
  color: yellow;
  border: 1px solid orange;
  transition-property: all;
  transition-duration: 2s;
}

```js hidden function updateTransition() { const els = document.querySelectorAll(".parent > div[class]"); for (let i = 0; i < els.length; i++) { els[i].classList.toggle("box1"); } }

const intervalID = setInterval(updateTransition, 10000);

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

{{EmbedLiveSample("step 示例")}}