三次貝賽爾曲線 (Cubic Bezier curve) ⇢ cubic-bezier() 由P0、P1、P2 和 P3四個點定義，P0(0, 0)到P3(1, 1)為曲線起點與終點，數值代表最終時間與最終狀態。
P0：默認值 (0, 0)
P1：動態取值 (x1, y1)
P2：動態取值 (x2, y2)
P3：默認值 (1, 1)
☞ 語法說明
CSS語法 ⇢ cubic-bezier(x1, y1 ,x2 , y2)
x軸(x1 和 x2 )數值須為0到1，y軸數值則無限制，可與 animation-timing-function 和 transition-timing-function 搭配。
animation-timing-function 數值
/* Keyword values */ 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; /* Function values */ animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1); animation-timing-function: steps(4, end); /* Steps Function keywords */ 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); /* Multiple animations */ animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1); /* Global values */ animation-timing-function: inherit; animation-timing-function: initial; animation-timing-function: revert; animation-timing-function: unset;
transition-timing-function 數值
/* 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
參考對應數值
| transition-timing-function(ease) | cubic-bezier(0.25,0.1,0.25,1) |
| transition-timing-function(ease-in) | cubic-bezier(0.42,0,1,1) |
| transition-timing-function(ease-out) | cubic-bezier(0,0,0.58,1) |
| transition-timing-function(ease-in-out) | cubic-bezier(0.42,0,0.58,1) |
| transition-timing-function(linear) | cubic-bezier(0,0,1,1) |
☞ 範例
/* css範例-transition-timing-function */
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}
/* css範例-animation-timing-function */
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
animation-timing-function: cubic-bezier(0.1, -0.6, 0.2, 0);
}
/*css範例-transition-timing-function 結合圖片動態*/
div {
transition(background 1s);
transition-timing-function(steps(13, end));
background: url("圖片路徑") left bottom no-repeat;
}
div:hover {
transition(background 1s);
transition-timing-function(steps(13, end));
background: url("圖片路徑") left bottom no-repeat;
background-position: right bottom;
}
