CSSアニメーションの使い方をサンプルで解説

2020年2月23日

CSSで使用できるアニメーションについて詳しく解説しました。

CSSのアニメーション設定は2種類ある

CSSのアニメーションは、簡単に設定できる「transition」と、細かく設定できる「animation」の2種類があります。

CSS transition（変化前と変化後の2点を設定）

CSS transition（トランジション）と呼びます。

transitionは、変化前と変化後の2点と秒数を設定し、アニメーションとして反映させます。

transitionの例として、「ホバーしたボックスが1秒かけて、青色に変化する」、という例をご確認ください。

<style>
.sample_transition{
    width: 100px;
    height: 100px;
    background-color: red;
    /* transitionの設定 */
    transition: all 1s;
}

/* ホバー後の変化 */
.sample_transition:hover{
    background-color: blue;
}
</style>

<div class="sample_transition"></div>

しっかりアニメーション付きで変化していることが分かります。

要素にtransitionを設定するだけで、変化のきっかけ（ホバーやJavaScriptによるクリックイベント）などがあればアニメーションを実行できます。
逆にいえば、何か能動的なアクションがないと、アニメーションを実行させることが出来ません。

基本的に設定できるのは変化前と変化後の2点のみです。
複雑な3つ以上の複雑な変化は後述の「animation」を使用することになります。

transitionを使用したプログラム例として、こちらの記事を是非ご確認ください。

[my_csv_list id=”1649,2261″ type=”1″ bold=”1″ arrow=”1″]

CSS animation（細かな変化が設定可能）

CSS Animationは、キーフレームでアニメーションを設定することが出来ます。

キーフレームとは、アニメーション開始の0%からアニメーション終了の100%までの間に、任意の地点に変化を引き起こすことが出来る設定のことです。
これにより、transitionでは不可能な3点以上の変化が可能です。

さらに、transitionとは異なり、アニメーションを引き起こすきっかけも不要で、自動的にアニメーションする要素、という設定も出来ます。

例として、「ホバーしたボックスが1秒かけて、赤→緑→青に無限に変化する」、という例をご確認ください。

<style>
.sample_animation{
    width: 100px;
    height: 100px;
    background-color: red;
    animation: sample1 1s infinite;
}

@keyframes sample1{
    0%{
        background: red;
    }
    50%{
        background: green;
    }
    100%{
        background: blue;
    }
}
</style>

<div class="sample_animation"></div>

キーフレームにアニメーションの設定名を任意で付け、0%～100%の間にその変化を指定しました。

キーフレームに設定することで、複雑なアニメーションを実現できるのが「animation」プロパティです。

transitionの使い方

まず先にtransitionの使い方を説明します。

transitionは、

この4つのプロパティから構成されています。

加えて、この4つのプロパティを1行で記述できる、

というプロパティもあります。

transition-property 変化できるプロパティを指定

「transition-property」は、変化させるプロパティを指定することができる設定です。

.sample{
    transition-property: all;
}

例として、ホバーして変化するallとプロパティ指定のサンプルを用意しましたので比較してください。

値	内容	サンプル
all(初期値)	すべてのプロパティが対象
none	すべて無効
background-color等	指定したプロパティのみ

transition-duration 変化にかかる時間を設定

「transition-duration」は、変化にかかる時間を設定することが出来ます。

.sample{
    transition-duration: 1s;
}

単位は「s（秒）」と「ms（ミリ秒）」から選べ、1sは1秒、100msは0.1秒の時間をかけます。

値	サンプル
500ms
2s
4s

transition-timing-function 変化のタイミングを指定する

「transition-timing-function」は、変化のタイミングや割合などを指定することが出来ます。

.sample{
    transition-timing-function: ease;
}

このプロパティに関しては実際に動作を確認したほうが早いと思いますので、下記の「アニメーションを実行」をホバーして、例をご確認ください。

値	内容	サンプル
ease(初期値)	開始・終了を滑らかに
linear	一定速度
ease-in	ゆっくり始まる
ease-out	ゆっくり終わる
ease-in-out	ゆっくり始まりゆっくり終わる
cubic-bezier(0,1,0,1)	手動で変化タイミングを設定

transition-delay 変化を遅らせる

「transition-delay」は、変化がいつ始まるかを指定できます。

.sample{
    transition-delay: 1s;
}

単位は「s（秒）」と「ms（ミリ秒）」から選べます。

値	サンプル
300ms
500ms
1s

transition 4つのプロパティをまとめて指定

「transition」は4つのプロパティをまとめて指定できます。

それぞれ、「transition-property」、「transition-duration」、「transition-timing-function」、「transition-delay」の順で値を設定できます。

.sample{
    transition-delay: all 1s ease 300ms;
}

コピペ用に個別設定版も用意しましたので、こちらもご利用ください。

.sample{
    transition-property: all; /* 対応させるプロパティ */
    transition-duration: 1s; /* 変化の時間 */
    transition-timing-function: ease; /* 変化のタイミング */
    transition-delay: 0s; /* 変化を遅らせる */
}

animationの使い方

次に、キーフレームを使用したアニメーションの使い方を解説します。

animationは、

この6つのプロパティから構成されています。

加えて、この6つのプロパティをスペース区切りで1行にまとめる、

というプロパティもあります。

animation-name アニメーションとキーフレームを紐づける

animation-nameは、キーフレームの設定で使用するアニメーションの名前を設定するプロパティです。

アニメーション設定は何よりこれがないと始まりません。

設定したanimation-nameは、@keyframesで名称を指定することで、進行割合によって指定のアニメーションを実行できます。

<style>
.test_animation{
    width: 20px;
    height: 20px;
    background-color: red;
    animation-name: test;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

@keyframes test{
    0%{
        background: red;
    }
    50%{
        background: green;
        width: 50%;
    }
    100%{
        background: blue;
        width: 100%;
    }
}
</style>

<div class="test_animation"></div>

animation-duration 変化にかかる時間を設定

「animation-duration」は、変化にかかる時間を設定することが出来ます。

.sample{
    animation-duration: 1s;
}

単位は「s（秒）」と「ms（ミリ秒）」から選べ、1sは1秒、100msは0.1秒の時間をかけます。

値	サンプル
500ms
2s
4s

animation-timing-function 変化のタイミングを指定する

「animation-timing-function」は、変化のタイミングや割合などを指定することが出来ます

.sample{
    animation-timing-function: ease;
}

設定毎の変化はサンプルをご確認ください。

値	内容	サンプル
ease(初期値)	開始・終了を滑らかに
linear	一定速度
ease-in	ゆっくり始まる
ease-out	ゆっくり終わる
ease-in-out	ゆっくり始まりゆっくり終わる
cubic-bezier(0,1,0,1)	手動で変化タイミングを設定

animation-delay 変化を遅らせる

「animation-delay」は、変化がいつ始まるかを指定できます。

.sample{
    animation-delay: 1s;
}

単位は「s（秒）」と「ms（ミリ秒）」から選べます。

値	サンプル
300ms
500ms
1s

animation-iteration-count 繰り返し回数を指定する

「animation-iteration-count」は、アニメーションの繰り返し回数を設定できます。

.sample{
    animation-iteration-count: infinite;
}

無限にループする場合は「infinite」、それ以外は整数の数値を設定します。

値	サンプル
1(初期値)
3
infinite(無限)

animation-direction アニメーションの再生方向を指定

「animation-direction」は、変化を折り返しか、逆再生するかなどのアニメーション方向を指定できます。

.sample{
    animation-direction: normal;
}

値	内容	サンプル
normal(初期値)	順再生
reverse	逆再生
alternate	順再生⇔逆再生
alternate-reverse	逆再生⇔順再生

animation 6つのプロパティをまとめて指定

「animation」は6つのプロパティをまとめて指定できます。

それぞれ、「animation-name」、「animation-duration」、「animation-timing-function」、「animation-delay」、「animation-iteration-count」、「animation-direction」の順で値を設定できます。

.sample{
    animation: test 1s ease 0s infinite normal;
}

コピペ用に個別設定版も用意しましたので、こちらもご利用ください。

.sample{
    animation-name: test; /* アニメーション名 */
    animation-duration: 1s; /* 変化の時間 */
    animation-timing-function: ease; /* 変化のタイミング */
    animation-delay: 0s; /* 変化を遅らせる */
    animation-iteration-count: infinite; /* 変化の回数 */
    animation-direction: normal; /* 変化の再生方向 */
}

@keyframes test{
    0%{
    }
    
    100%{
    }
}

---

困ったら見れるような辞書として、すべてのプロパティをサンプル付きでご紹介しました。

CSSアニメーションの設定に迷ったらご活用頂けると嬉しいです。

以上、CSSアニメーションの使い方をサンプルで解説、でした。