CSS: transition-timing-function 速度変化のパターン
CSS でトランジションの速度変化のパターンを指定する場合は、 transition-timing-function プロパティを指定します。
トランジション(遷移)をゆっくり始めたり、高速で始めたりといった速度変化を 自由に指定できます。
指定する値は、キーワード、steps関数、cubic-bezier関数のいずれかを指定します。
transition-timing-function プロパティの使用例
transition-timing-function: ease;
transition-timing-function: liner;
transition-timing-function: step(3, end);
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
transition-timing-function プロパティの値
★ ease
ゆっくりと変化を開始、中盤は加速、終盤に減速して終了します。
cubic-bezier(0.25, 0.1, 0.25, 1)と同じ。
★ linear
一定の速度で変化します。
cubic-bezier(0, 0, 1, 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)と同じ。
★ step-start
steps(1, start) と同じ。
★ step-end
steps(1, end) と同じ。
★ steps(ステップ数, start or end)
指定したステップ数で等間隔に変化します。 例えば、ステップ数に3を指定した場合は3段階に変化します。
★ cubic-bezie(x1, y1, x2, y2)
3次べベジェ曲線を用いて指定します。
速度変化のサンプルコード
下の4つのボックス(div 要素)にそれぞれ違う値を指定しています。
ease
liner
steps(3, end)
cubic-bezie(0.2, 0.2, 0.8, 0.8)
<div class="sample1 timing">ease</div>
<div class="sample2 timing">liner</div>
<div class="sample3 timing">steps(3, end)</div>
<div class="sample4 timing">cubic-bezie(0.2, 0.2, 0.8, 0.8)</div>
<style>
div.timing {
width: 300px;
height: 100px;
border: 1px solid black;
background-color: white;
transition-property: background-color;
transition-duration: 2s;
margin-bottom: 5px;
}
div.timing:hover {
background-color: gray;
}
div.sample1 {
transition-timing-function: ease;
}
div.sample2 {
transition-timing-function: linear;
}
div.sample3 {
transition-timing-function: steps(3, end);
}
div.sample4 {
transition-timing-function: cubic-bezie(0.2, 0.2, 0.8, 0.8);
}
</style>