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>

HTML・CSS入門