【CSS】animation-timing-functionについての備忘録

先日、animationのショートハンドについて説明した記事を書きましたが、ここではanimiation-timing-functionについて深堀りしていきます。

animation-timing-functionとは

@keyframeで指定した動きを「どのように」動かすかを指定します。

ひとつひとつanimation-timing-functionとして指定するか、animationのショートハンドの中で指定することができます。

animation-timing-function: ease;
animation: rotate_animation 5s ease;
/* どちらでもいいです */

animation-timing-functionの各設定

ease（初期値）	開始と終了をゆっくり変化
liner	一定の速度で変化
ease-in	最初はゆっくりで、だんだん速く
ease-out	最初は速く、だんだんゆっくり
ease-in-out	開始と終了はゆっくり変化。easeとにているが、開始・終了点付近はさらにゆっくり変化。
step-start	開始時に@keyframeで示した次の段階までステップ変化
step-end	終了時に @keyframe で示した次の段階までステップ変化
steps(n,start)	durationで指定した時間をn等分してステップ変化 startとendを指定できる
cubic-bezier(n, n, n, n)	３次ベジェ曲線を数値で設定

それぞれどのように変化するか見てみましょう。

ease

liner

ease-in

ease-out

ease-in-out

step-start

step-end

step(5, start)

step(5, end)

※動きを見やすくするためにデモのcssには前後に停止する部分を設定しています。
※cubic-bezier はあとで説明します。

言葉で表現するとease系は「ふわっと」、step系は「カクカク」した感じで動くことがわかると思います。

linearかeaseかで言ったら…。

linearは一定の速度で動きますが、webサイトで心地よい動きを表現するにはease系を使用している場合がほとんどですね。
linearの使い所はと言うと、animationをループさせる場合などにつなぎをなめらかにしたいときlinearを使うといい感じになります。

ease

linear

easeもこれはこれで使い所ありそうですが。

stepは@keyframeの設定とstart・endがポイントです。

step系ですが、「カクカク」した感じでステップ変化するのですが、@keyframeで0%と100%（from→toでもいっしょ）のみ設定していると上のように最初の設定から最後の設定までステップ変化します。ここで間に設定を挟むとそこまで変化します。startとendの違いは、ステップ変化するタイミングを変えることができます。

@keyframes step-lecture {
        0% {
            transform: translateX(0);
        }

        50% {
            transform: translateX(75px);
        }

        100% {
            transform: translateX(150px);
        }
    }

step-start

step-end

ここでは50%で半分進むように設定しています。
step-startとstep-endでは「その時間に達するまでにどちらのcssを適用するか」といった感じで覚えておけばいいと思います。

steps(n, start)

steps(n, start)ではdurationで設定した時間をn等分してステップ変化するという特性があります。

steps(3, start)

steps(8, start)

カッコ内のstart/endの特性はさきほど説明したとおりです。

高度だが難しいcubic-bezier

cubic-bezierについてはあらかじめ設定されている以外の動きを設定できますが、かなり高度なものなのでいきなり使用するのはかなり難しいです。
cubic-bezier.comなどの視覚的な曲線からcubic-bezierの数値を生成するツールを使用することをおすすめします。
やり方によってはこんな変わった動きも生成できます。

cubic-bezier(.01, .52, 1, -0.62)

@keyframes内に設定することもできます。

細かく動きを設定したい場合には、@keyframes内に個別に設定することもできます。

 @keyframes inkeyframes-lecture {
            0% {
                transform: translateX(0);
                animation-timing-function: ease-in-out;
            }

            50% {
                transform: translateX(100px);
                animation-timing-function: steps(5,start);
            }

            80% {
                transform: translateX(200px);
            }

            100% {
                transform: translateX(200px);
            }
        }

ここでは変化が見やすいように極端に変えていますが、50%から動きが変わっているのが見えると思います。

ここでの注意点としては、animation-timing-functionを設定した後から適用されるということを覚えておきましょう。