animation-timing-function 規定動畫的速度曲線。
速度曲線定義動畫從一套 CSS 樣式變為另一套所用的時間。
速度曲線用於使變化更為平滑。
基本介紹
- 外文名：animation-timing-function
- 作用：規定動畫的速度曲線
簡介,瀏覽器支持,定義和用法,語法,實例 1,實例 2,示例,
簡介
animation-timing-function
語法：
animation-timing-function：linear | ease | ease-in | ease-out || ease-in-out | steps( <interval_number> [, start | end ]) | step-start | step-end ]| cubic-bezier(, , , ) [ , linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(, , , ) | steps( <interval_number> [, start | end ]) | step-start | step-end ]]*
默認值：ease
取值：
linear：
線性過渡。等同於貝塞爾曲線(0.0, 0.0, 1.0, 1.0)
ease：
平滑過渡。等同於貝塞爾曲線(0.25, 0.1, 0.25, 1.0)
ease-in：
由慢到快。等同於貝塞爾曲線(0.42, 0, 1.0, 1.0)
ease-out：
由快到慢。等同於貝塞爾曲線(0, 0, 0.58, 1.0)
ease-in-out：
由慢到快再到慢。等同於貝塞爾曲線(0.42, 0, 0.58, 1.0)
cubic-bezier(, , , )：
特定的貝塞爾曲線類型，4個數值需在[0, 1]區間內
step-start：
馬上轉跳到動畫結束狀態。
step-end：
保持動畫開始狀態，直到動畫執行時間結束，馬上轉跳到動畫結束狀態。
steps(<number>[, [ start | end ] ]?)：
第一個參數number為指定的間隔數，即把動畫分為n步階段性展示，第二個參數默認為end，設定最後一步的狀態，start為結束時的狀態，end為開始時的狀態，若設定與animation-fill-mode的效果衝突，而以animation-fill-mode的設定為動畫結束的狀態。
說明：
檢索或設定對象動畫的過渡類型
如果提供多個屬性值，以逗號進行分隔。
對應的腳本特性為animationTimingFunction。
寫法：
核心類型寫法
Webkit(Chrome/Safari)-webkit-animation-timing-function
Gecko(Firefox)-moz-animation-timing-function
Presto(Opera)
Trident(IE)-ms-animation-timing-function
W3Canimation-timing-function
瀏覽器支持
Safari 和 Chrome 支持替代的 -webkit-animation-timing-function 屬性。Internet Explorer 10、Firefox 以及 Opera 支持 animation-timing-function 屬性。
注釋：Internet Explorer 9 以及更早的版本不支持 animation-timing-function 屬性。
定義和用法
animation-timing-function 規定動畫的速度曲線。
速度曲線定義動畫從一套 CSS 樣式變為另一套所用的時間。
速度曲線用於使變化更為平滑。
| 默認值： | ease |
|---|---|
| 繼承性： | no |
| 版本： | CSS3 |
| JavaScript 語法： | object.style.animationTimingFunction="linear" |
語法
animation-timing-function: value;
animation-timing-function 使用名為三次貝塞爾（Cubic Bezier）函式的數學函式，來生成速度曲線。您能夠在該函式中使用自己的值，也可以預定義的值：
| 值 | 描述 | 測試 |
|---|---|---|
linear | 動畫從頭到尾的速度是相同的。 | |
ease | 默認。動畫以低速開始，然後加快，在結束前變慢。 | |
ease-in | 動畫以低速開始。 | |
ease-out | 動畫以低速結束。 | |
ease-in-out | 動畫以低速開始和結束。 | |
cubic-bezier(n,n,n,n) | 在 cubic-bezier 函式中自己的值。可能的值是從 0 到 1 的數值。 |
提示：請試著在下面的“親自試一試”功能中使用不同的值。
實例 1
為了更好地理解不同的定時函式值，這裡提供了設定五個不同值的五個不同的 div 元素：
/* W3C 和 Opera: */
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}
/* Firefox: */
#div1 {-moz-animation-timing-function: linear;}
#div2 {-moz-animation-timing-function: ease;}
#div3 {-moz-animation-timing-function: ease-in;}
#div4 {-moz-animation-timing-function: ease-out;}
#div5 {-moz-animation-timing-function: ease-in-out;}
/* Safari 和 Chrome: */
#div1 {-webkit-animation-timing-function: linear;}
#div2 {-webkit-animation-timing-function: ease;}
#div3 {-webkit-animation-timing-function: ease-in;}
#div4 {-webkit-animation-timing-function: ease-out;}
#div5 {-webkit-animation-timing-function: ease-in-out;}
實例 2
與上例相同，但是通過 cubic-bezier 函式來定義速度曲線：
/* W3C 和 Opera: */
#div1 {animation-timing-function: cubic-bezier(0,0,1,1);}
#div2 {animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {animation-timing-function: cubic-bezier(0.42,0,0.58,1);}
/* Firefox: */
#div1 {-moz-animation-timing-function: cubic-bezier(0,0,1,1);}
#div2 {-moz-animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-moz-animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-moz-animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-moz-animation-timing-function: cubic-bezier(0.42,0,0.58,1);}
/* Safari 和 Chrome: */
#div1 {-webkit-animation-timing-function: cubic-bezier(0,0,1,1);}
#div2 {-webkit-animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-webkit-animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-webkit-animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-webkit-animation-timing-function: cubic-bezier(0.42,0,0.58,1);}
示例
h1 {
font - size: 16px;
}
div {
width: 60px;
height: 60px;
margin: 200px 0 0 50px;
padding: 10px;
border - radius: 41px;
box - shadow: 0 0 10px rgba(204, 102, 0, .8);
background: #F6D66E;
background: -moz - linear - gradient(top, #fff, #F6D66E);
background: -webkit - linear - gradient(top, #fff, #F6D66E);
background: -o - linear - gradient(top, #fff, #F6D66E);
background: -ms - linear - gradient(top, #fff, #F6D66E);
background: linear - gradient(top, #fff, #F6D66E); - moz - animation: animations 4s linear infinite; - webkit - animation: animations 4s linear infinite; - o - animation: animations 4s linear infinite; - ms - animation: animations 4s linear infinite;
animation: animations 4s linear infinite;
}@ - webkit - keyframes animations {
0 % { - webkit - transform: translate(0, 0);
}
12 % { - webkit - transform: translate(80px, -25px);
}
25 % { - webkit - transform: translate(200px, -50px);
}
38 % { - webkit - transform: translate(320px, -25px);
}
50 % { - webkit - transform: translate(400px, 0);
}
62 % { - webkit - transform: translate(320px, 25px);
}
75 % { - webkit - transform: translate(200px, 50px);
}
87 % { - webkit - transform: translate(80px, 25px);
}
100 % { - webkit - transform: translate(0, 0);
}
}@ - moz - keyframes animations {
0 % { - moz - transform: translate(0, 0);
}
12 % { - moz - transform: translate(80px, -25px);
}
25 % { - moz - transform: translate(200px, -50px);
}
38 % { - moz - transform: translate(320px, -25px);
}
50 % { - moz - transform: translate(400px, 0);
}
62 % { - moz - transform: translate(320px, 25px);
}
75 % { - moz - transform: translate(200px, 50px);
}
87 % { - moz - transform: translate(80px, 25px);
}
100 % { - moz - transform: translate(0, 0);
}
}@ - o - keyframes animations {
0 % { - o - transform: translate(0, 0);
}
12 % { - o - transform: translate(80px, -25px);
}
25 % { - o - transform: translate(200px, -50px);
}
38 % { - o - transform: translate(320px, -25px);
}
50 % { - o - transform: translate(400px, 0);
}
62 % { - o - transform: translate(320px, 25px);
}
75 % { - o - transform: translate(200px, 50px);
}
87 % { - o - transform: translate(80px, 25px);
}
100 % { - o - transform: translate(0, 0);
}
}@ - ms - keyframes animations {
0 % { - ms - transform: translate(0, 0);
}
12 % { - ms - transform: translate(80px, -25px);
}
25 % { - ms - transform: translate(200px, -50px);
}
38 % { - ms - transform: translate(320px, -25px);
}
50 % { - ms - transform: translate(400px, 0);
}
62 % { - ms - transform: translate(320px, 25px);
}
75 % { - ms - transform: translate(200px, 50px);
}
87 % { - ms - transform: translate(80px, 25px);
}
100 % { - ms - transform: translate(0, 0);
}
}@keyframes animations {
0 % {
transform: translate(0, 0);
}
12 % {
transform: translate(80px, -25px);
}
25 % {
transform: translate(200px, -50px);
}
38 % {
transform: translate(320px, -25px);
}
50 % {
transform: translate(400px, 0);
}
62 % {
transform: translate(320px, 25px);
}
75 % {
transform: translate(200px, 50px);
}
87 % {
transform: translate(80px, 25px);
}
100 % {
transform: translate(0, 0);
}
}線性運動的太陽（您還可以定義其它的動畫過渡類型，如ease - in,
ease - out,step-start等）：abc
