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)3次ベジェ曲線を数値で設定

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

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を設定した後から適用されるということを覚えておきましょう。

まとめ

animation-timing-functionを変えると、かなり印象が変わります。
やさしい感じにしたり、スタイリッシュにしたりとデザインにあわせて使い分けられるといいですね。

ではまた。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です