Aug. 30th,2021
プロパティについて
＃
概要
| 初期値 | “transition-timing-function: ease;” |
| 適用対象 | すべての要素 |
| 継承 | No |
| パーセント値 | パーセント値は指定できません |
| 計算値 | 指定された通り |
| アニメーション | 不可 |
“transition-timing-function”プロパティは“transition-duration”プロパティなどで指定された要素に適用されているプロパティの値が変化した時の遷移の進捗速度をイージングによって変化させるプロパティです。
イージング関数の入力値は遷移の経過時間です。出力される値は遷移の進捗度で、補間の際に使用されます。
サンプルコード
div { transition-timing-function: ease-in-out;}
＃
値
| 値 | 説明 |
|---|---|
| “<easing-function>”値 | |
| linear | 遷移は等速で進行します |
| cubic-bezier() | 遷移の進捗度をベジェ曲線に沿って変化させます |
| ease | 遷移は速く始まり、徐々に加速した後は最後へ向けて減速します (“cubic-bezier(0.25, 0.1, 0.25, 1)”と同じです。) |
| ease-in | 遷移はゆっくり始まり、最後へ向けて加速します (“cubic-bezier(0.42, 0, 1, 1)”と同じです。) |
| ease-out | 遷移は速く始まり、最後へ向けて減速します (“cubic-bezier(0, 0, 0.58, 1)”と同じです。) |
| ease-in-out | 遷移はゆっくり始まり、徐々に加速し、最後はゆっくり終わります (“cubic-bezier(0.42, 0, 0.58, 1)”と同じです。) |
| steps() | 遷移の進捗度を階段状に変化させます |
| step-start | 開始とともに遷移後の状態に変わり、最後までそのままです (“steps(1,start)”と同じです。) |
| step-end | 遷移前の状態が続き、終了とともに遷移後の状態に変わります (“steps(1,end)”と同じです。) |
| 他の値 | |
| 共通キーワード | |
＃
複数のプロパティの遷移効果を指定する
“transition-property”プロパティで複数のプロパティの遷移効果が指定されている場合、値を“,(コンマ)”で区切って記述することでそれぞれのイージングについての指定をすることができます。値の順番は“transition-property”プロパティで指定した値の順番に対応します。
div {
transition-duration: 〚1個目のプロパティの所要時間〛,〚2個目のプロパティの所要時間〛,〚3個目のプロパティの所要時間〛,...;
transition-property: 〚1個目のプロパティ〛,〚2個目のプロパティ〛,〚3個目のプロパティ〛,...;
transition-timing-function: 〚1個目のプロパティのイージング〛,〚2個目のプロパティのイージング〛,〚3個目のプロパティのイージング〛,...;
}
＃
使用例
＃
＃
3次ベジェ・イージング関数で指定する
.sample-box:hover {
transform: scale(1.5);
background-color: #e95295;
transition-duration: 3s;
transition-timing-function: ease;
}
hover!
.sample-box:hover {
transform: scale(1.5);
background-color: #e95295;
transition-duration: 3s;
transition-timing-function: ease-in;
}
hover!
.sample-box:hover {
transform: scale(1.5);
background-color: #e95295;
transition-duration: 3s;
transition-timing-function: ease-out;
}
hover!
.sample-box:hover {
transform: scale(1.5);
background-color: #e95295;
transition-duration: 3s;
transition-timing-function: ease-in-out;
}
hover!
.sample-box:hover {
transform: scale(1.5);
background-color: #e95295;
transition-duration: 3s;
transition-timing-function: cubic-bezier(0.5,1.5,0.5,-1);
}
hover!
＃
ステップ・イージング関数で指定する
.sample-box:hover {
transform: scale(1.5);
background-color: #e95295;
transition-duration: 3s;
transition-timing-function: step-start;
}
hover!
.sample-box:hover {
transform: scale(1.5);
background-color: #e95295;
transition-duration: 3s;
transition-timing-function: step-end;
}
hover!
.sample-box:hover {
transform: scale(1.5);
background-color: #e95295;
transition-duration: 3s;
transition-timing-function: steps(5,end);
}
hover!
＃
