# transition-timing-function

`transition-timing-function` 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, 0.1);
transition-timing-function: frames(10);

/* 多個函數 */
transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 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>#where `<timing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function>`where `<cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)<step-timing-function> = step-start | step-end | steps(<integer>[, <step-position>]?)`where `<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);
```

## 規格

CSS Transitions
The definition of 'transition-timing-function' in that specification.
Working Draft 初始定義
預設值 `ease` all elements, `::before` and `::after` pseudo-elements no interactive as specified discrete the unique non-ambiguous order defined by the formal grammar

## 相容性

Update compatibility data on GitHub
Desktop Mobile Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Chrome Full support 26 Full support 26 Full support 1Prefixed Prefixed Implemented with the vendor prefix: -webkit- Edge Full support 12 Full support 12 Full support 12Prefixed Prefixed Implemented with the vendor prefix: -webkit- Firefox Full support 16 Full support 16 Full support 4Prefixed Prefixed Implemented with the vendor prefix: -moz- Full support 49Prefixed Prefixed Implemented with the vendor prefix: -webkit- Full support 44Prefixed Disabled Prefixed Implemented with the vendor prefix: -webkit-Disabled From version 44: this feature is behind the `layout.css.prefixes.webkit` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config. IE Full support 10 Full support 10 Full support 10Prefixed Prefixed Implemented with the vendor prefix: -ms- Opera Full support 12.1 Full support 12.1 Full support 15Prefixed Prefixed Implemented with the vendor prefix: -webkit- No support 11.6 — 15Prefixed Prefixed Implemented with the vendor prefix: -o- Safari Full support 9 Full support 9 Full support 3.1Prefixed Prefixed Implemented with the vendor prefix: -webkit- WebView Android Full support ≤37 Full support ≤37 Full support ≤37Prefixed Prefixed Implemented with the vendor prefix: -webkit- Chrome Android Full support 26 Full support 26 Full support 18Prefixed Prefixed Implemented with the vendor prefix: -webkit- Firefox Android Full support 16 Full support 16 Full support 4Prefixed Prefixed Implemented with the vendor prefix: -moz- Full support 49Prefixed Prefixed Implemented with the vendor prefix: -webkit- Full support 44Prefixed Disabled Prefixed Implemented with the vendor prefix: -webkit-Disabled From version 44: this feature is behind the `layout.css.prefixes.webkit` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config. Opera Android Full support 12.1 Full support 12.1 Full support 14Prefixed Prefixed Implemented with the vendor prefix: -webkit- No support 12 — 14Prefixed Prefixed Implemented with the vendor prefix: -o- Safari iOS Full support 9 Full support 9 Full support 2Prefixed Prefixed Implemented with the vendor prefix: -webkit- Samsung Internet Android Full support 1.5 Full support 1.5 Full support 1.0Prefixed Prefixed Implemented with the vendor prefix: -webkit- Chrome No support No Edge No support No Firefox Full support 65 IE No support No Opera No support No Safari No support No WebView Android No support No Chrome Android No support No Firefox Android Full support 65 Opera Android No support No Safari iOS No support No Samsung Internet Android No support No

### Legend

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
User must explicitly enable this feature.
User must explicitly enable this feature.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.