View in English Always switch to English

transition-timing-function

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015年9月⁩.

transition-timing-function CSS 屬性用於表示各個被動畫特效影響的屬性的區間值計算方式。

嘗試一下

transition-timing-function: linear;

transition-timing-function: ease-in;

transition-timing-function: steps(6, end);

transition-timing-function: cubic-bezier(0.29, 1.01, 1, -0.68);

<section id="default-example">
 <div id="example-element">Hover to see<br />the transition.</div>
</section>

#example-element {
 background-color: #e4f0f5;
 color: #000;
 padding: 1rem;
 border-radius: 0.5rem;
 font: 1em monospace;
 width: 100%;
 transition: margin-right 2s;
}
#default-example:hover > #example-element {
 background-color: #909;
 color: #fff;
 margin-right: 40%;
}

本質上,這個屬性讓你使用加速度曲線來表示動畫變換的速度。

而每個可以動畫化的屬性使用一個 <timing-function> 作為加速度曲線。

你也許有許多時間函數,而你可以透過使用 transition-property 屬性來個別設置。如果有前述清單的數量超過時間函數的數量,則會使用預設值 ease;如果少於那多餘的時間函數會被忽略,在這兩種情況,CSS 宣告總會有效。

語法

css

/* Keyword */
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;
/* 函數 */
transition-timing-function: steps(4, end);
transition-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1);
transition-timing-function: frames(10);
/* 多個函數 */
transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1, 0.1);
/* 全域值 */
transition-timing-function: inherit;
transition-timing-function: initial;
transition-timing-function: unset;
/* 包含 transition-property */
transition-property: width, height;
transition-timing-function: ease-in, ease-out; // ease-in to width and ease-out to height

值

<timing-function>: 每個 <timing-function> 連結到對應的動畫化屬性,請參考 transition-property。

公式語法

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

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

<linear-easing-function> = 
 linear | 
 <linear()> 

<cubic-bezier-easing-function> = 
 ease | 
 ease-in | 
 ease-out | 
 ease-in-out | 
 <cubic-bezier()> 

<step-easing-function> = 
 step-start | 
 step-end | 
 <steps()> 

<linear()> = 
 linear( [ <number> && <percentage> {0,2} ] # ) 

<cubic-bezier()> = 
 cubic-bezier( [ <number [0,1]> , <number> ] # {2} ) 

<steps()> = 
 steps( <integer> , <step-position>? ) 

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

範例

`transition-timing-function: ease`

<div class="parent">
 <div class="box">Lorem</div>
</div>

.parent {
 width: 250px;
 height: 125px;
}
.box {
 width: 100px;
 height: 100px;
 background-color: red;
 font-size: 20px;
 left: 0px;
 top: 0px;
 position: absolute;
 -webkit-transition-property: width height background-color font-size left top
 color;
 -webkit-transition-duration: 2s;
 -webkit-transition-timing-function: ease;
 transition-property: width height background-color font-size left top color;
 transition-duration: 2s;
 transition-timing-function: ease;
}
.box1 {
 width: 50px;
 height: 50px;
 background-color: blue;
 color: yellow;
 font-size: 18px;
 left: 150px;
 top: 25px;
 position: absolute;
 -webkit-transition-property: width height background-color font-size left top
 color;
 -webkit-transition-duration: 2s;
 -webkit-transition-timing-function: ease;
 transition-property: width height background-color font-size left top color;
 transition-duration: 2s;
 transition-timing-function: ease;
}

function updateTransition() {
 var el = document.querySelector("div.box");
 if (el) {
 el.className = "box1";
 } else {
 el = document.querySelector("div.box1");
 el.className = "box";
 }
 return el;
}
var intervalID = window.setInterval(updateTransition, 7000);

[フレーム]

`transition-timing-function: ease-in`

<div class="parent">
 <div class="box">Lorem</div>
</div>

.parent {
 width: 250px;
 height: 125px;
}
.box {
 width: 100px;
 height: 100px;
 background-color: red;
 font-size: 20px;
 left: 0px;
 top: 0px;
 position: absolute;
 -webkit-transition-property: width height background-color font-size left top
 color;
 -webkit-transition-duration: 2s;
 -webkit-transition-timing-function: ease-in;
 transition-property: width height background-color font-size left top color;
 transition-duration: 2s;
 transition-timing-function: ease-in;
}
.box1 {
 width: 50px;
 height: 50px;
 background-color: blue;
 color: yellow;
 font-size: 18px;
 left: 150px;
 top: 25px;
 position: absolute;
 -webkit-transition-property: width height background-color font-size left top
 color;
 -webkit-transition-duration: 2s;
 -webkit-transition-timing-function: ease-in;
 transition-property: width height background-color font-size left top color;
 transition-duration: 2s;
 transition-timing-function: ease-in;
}

function updateTransition() {
 var el = document.querySelector("div.box");
 if (el) {
 el.className = "box1";
 } else {
 el = document.querySelector("div.box1");
 el.className = "box";
 }
 return el;
}
var intervalID = window.setInterval(updateTransition, 7000);

[フレーム]

`transition-timing-function: ease-out`

<div class="parent">
 <div class="box">Lorem</div>
</div>

.parent {
 width: 250px;
 height: 125px;
}
.box {
 width: 100px;
 height: 100px;
 background-color: red;
 font-size: 20px;
 left: 0px;
 top: 0px;
 position: absolute;
 -webkit-transition-property: width height background-color font-size left top
 color;
 -webkit-transition-duration: 2s;
 -webkit-transition-timing-function: ease-out;
 transition-property: width height background-color font-size left top color;
 transition-duration: 2s;
 transition-timing-function: ease-out;
}
.box1 {
 width: 50px;
 height: 50px;
 background-color: blue;
 color: yellow;
 font-size: 18px;
 left: 150px;
 top: 25px;
 position: absolute;
 -webkit-transition-property: width height background-color font-size left top
 color;
 -webkit-transition-duration: 2s;
 -webkit-transition-timing-function: ease-out;
 transition-property: width height background-color font-size left top color;
 transition-duration: 2s;
 transition-timing-function: ease-out;
}

function updateTransition() {
 var el = document.querySelector("div.box");
 if (el) {
 el.className = "box1";
 } else {
 el = document.querySelector("div.box1");
 el.className = "box";
 }
 return el;
}
var intervalID = window.setInterval(updateTransition, 7000);

[フレーム]

`transition-timing-function: ease-in-out`

<div class="parent">
 <div class="box">Lorem</div>
</div>

.parent {
 width: 250px;
 height: 125px;
}
.box {
 width: 100px;
 height: 100px;
 background-color: red;
 font-size: 20px;
 left: 0px;
 top: 0px;
 position: absolute;
 -webkit-transition-property: width height background-color font-size left top
 color;
 -webkit-transition-duration: 2s;
 -webkit-transition-timing-function: ease-in-out;
 transition-property: width height background-color font-size left top color;
 transition-duration: 2s;
 transition-timing-function: ease-in-out;
}
.box1 {
 width: 50px;
 height: 50px;
 background-color: blue;
 color: yellow;
 font-size: 18px;
 left: 150px;
 top: 25px;
 position: absolute;
 -webkit-transition-property: width height background-color font-size left top
 color;
 -webkit-transition-duration: 2s;
 -webkit-transition-timing-function: ease-in-out;
 transition-property: width height background-color font-size left top color;
 transition-duration: 2s;
 transition-timing-function: ease-in-out;
}

function updateTransition() {
 var el = document.querySelector("div.box");
 if (el) {
 el.className = "box1";
 } else {
 el = document.querySelector("div.box1");
 el.className = "box";
 }
 return el;
}
var intervalID = window.setInterval(updateTransition, 7000);

[フレーム]

`transition-timing-function: linear`

<div class="parent">
 <div class="box">Lorem</div>
</div>

.parent {
 width: 250px;
 height: 125px;
}
.box {
 width: 100px;
 height: 100px;
 background-color: red;
 font-size: 20px;
 left: 0px;
 top: 0px;
 position: absolute;
 -webkit-transition-property: width height background-color font-size left top
 color;
 -webkit-transition-duration: 2s;
 -webkit-transition-timing-function: linear;
 transition-property: width height background-color font-size left top color;
 transition-duration: 2s;
 transition-timing-function: linear;
}
.box1 {
 width: 50px;
 height: 50px;
 background-color: blue;
 color: yellow;
 font-size: 18px;
 left: 150px;
 top: 25px;
 position: absolute;
 -webkit-transition-property: width height background-color font-size left top
 color;
 -webkit-transition-duration: 2s;
 -webkit-transition-timing-function: linear;
 transition-property: width height background-color font-size left top color;
 transition-duration: 2s;
 transition-timing-function: linear;
}

function updateTransition() {
 var el = document.querySelector("div.box");
 if (el) {
 el.className = "box1";
 } else {
 el = document.querySelector("div.box1");
 el.className = "box";
 }
 return el;
}
var intervalID = window.setInterval(updateTransition, 7000);

[フレーム]

`transition-timing-function: step-start`

<div class="parent">
 <div class="box">Lorem</div>
</div>

.parent {
 width: 250px;
 height: 125px;
}
.box {
 width: 100px;
 height: 100px;
 background-color: red;
 font-size: 20px;
 left: 0px;
 top: 0px;
 position: absolute;
 -webkit-transition-property: width height background-color font-size left top
 color;
 -webkit-transition-duration: 2s;
 -webkit-transition-timing-function: step-start;
 transition-property: width height background-color font-size left top color;
 transition-duration: 2s;
 transition-timing-function: step-start;
}
.box1 {
 width: 50px;
 height: 50px;
 background-color: blue;
 color: yellow;
 font-size: 18px;
 left: 150px;
 top: 25px;
 position: absolute;
 -webkit-transition-property: width height background-color font-size left top
 color;
 -webkit-transition-duration: 2s;
 -webkit-transition-timing-function: step-start;
 transition-property: width height background-color font-size left top color;
 transition-duration: 2s;
 transition-timing-function: step-start;
}

function updateTransition() {
 var el = document.querySelector("div.box");
 if (el) {
 el.className = "box1";
 } else {
 el = document.querySelector("div.box1");
 el.className = "box";
 }
 return el;
}
var intervalID = window.setInterval(updateTransition, 7000);

[フレーム]

`transition-timing-function: step-end`

<div class="parent">
 <div class="box">Lorem</div>
</div>

.parent {
 width: 250px;
 height: 125px;
}
.box {
 width: 100px;
 height: 100px;
 background-color: red;
 font-size: 20px;
 left: 0px;
 top: 0px;
 position: absolute;
 -webkit-transition-property: width height background-color font-size left top
 color;
 -webkit-transition-duration: 2s;
 -webkit-transition-timing-function: step-end;
 transition-property: width height background-color font-size left top color;
 transition-duration: 2s;
 transition-timing-function: step-end;
}
.box1 {
 width: 50px;
 height: 50px;
 background-color: blue;
 color: yellow;
 font-size: 18px;
 left: 150px;
 top: 25px;
 position: absolute;
 -webkit-transition-property: width height background-color font-size left top
 color;
 -webkit-transition-duration: 2s;
 -webkit-transition-timing-function: step-end;
 transition-property: width height background-color font-size left top color;
 transition-duration: 2s;
 transition-timing-function: step-end;
}

function updateTransition() {
 var el = document.querySelector("div.box");
 if (el) {
 el.className = "box1";
 } else {
 el = document.querySelector("div.box1");
 el.className = "box";
 }
 return el;
}
var intervalID = window.setInterval(updateTransition, 7000);

[フレーム]

`transition-timing-function: steps(4, end)`

<div class="parent">
 <div class="box">Lorem</div>
</div>

.parent {
 width: 250px;
 height: 125px;
}
.box {
 width: 100px;
 height: 100px;
 background-color: red;
 font-size: 20px;
 left: 0px;
 top: 0px;
 position: absolute;
 -webkit-transition-property: width height background-color font-size left top
 color;
 -webkit-transition-duration: 2s;
 -webkit-transition-timing-function: steps(4, end);
 transition-property: width height background-color font-size left top color;
 transition-duration: 2s;
 transition-timing-function: steps(4, end);
}
.box1 {
 width: 50px;
 height: 50px;
 background-color: blue;
 color: yellow;
 font-size: 18px;
 left: 150px;
 top: 25px;
 position: absolute;
 -webkit-transition-property: width height background-color font-size left top
 color;
 -webkit-transition-duration: 2s;
 -webkit-transition-timing-function: steps(4, end);
 transition-property: width height background-color font-size left top color;
 transition-duration: 2s;
 transition-timing-function: steps(4, end);
}

function updateTransition() {
 var el = document.querySelector("div.box");
 if (el) {
 el.className = "box1";
 } else {
 el = document.querySelector("div.box1");
 el.className = "box";
 }
 return el;
}
var intervalID = window.setInterval(updateTransition, 7000);

[フレーム]

規格

Specification
CSS Transitions # transition-timing-function-property

預設值	`ease`
Applies to	all elements, `::before` and `::after` pseudo-elements
繼承與否	no
Computed value	as specified
Animation type	Not animatable

相容性

看更多

Help improve MDN

Learn how to contribute

This page was last modified on ⁨2025年7月15日⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content