今回は、CSSで動きをつける際によく使われる「animation」と「@keyframes」の解説をしていきます。
どちらも現在では多くのサイトに使用されているCSSですが、詳しい使い方を知らずになんとなく使っている、という方も多いのではないでしょうか。
他サイトとの差別化や、コンテンツの魅力を引き出すためには効果的なアニメーションが不可欠です。
同じくアニメーションによく使われる「transition」との違いや、「animation」「@keyframes」の概要を解説しますので、この機会にぜひマスターして使いこなせるようになりましょう！
「animation」と「transition 」の違い
「animation」と同じく、要素にアニメーションを実装するCSSとして「transition」もよく使われていますね。
どちらも役割が似ているため混同しやすく、違いをあまり理解していない方も多いのではないでしょうか。
より詳細な設定をするなら「animation」
CSSを使って表示を切り替えると、何も設定しなければその表示は瞬時に切り替わります。その際、切り替わる動きを滑らかにつなげてくれるのが「transition」です。
スムーズに表示を切り替えることで、高級感や今っぽい雰囲気が生まれ、ユーザーの操作感にも良い印象を与えることができます。
しかしこの「transition」は、残念ながらアニメーションの始点と終点である2点間の遷移に対してのみしか使うことができないのです。
例えば、背景色を赤から青にアニメーションさせるだけなら「transition」を使って問題ありませんが、そこからさらに緑に変化させたい、となると「transition」では対応できないのです。
そこで「animation」の出番です！
「animation」を使えば、複数の変化を連続してアニメーションさせることが可能になり、その動きを細かく設定することも可能です。
またマウスホバー等の、アニメーションが始まるきっかけを与える必要もありません。
「animation」と「transition」の違いまとめ
| 「animation」 | 「transition」 |
|---|---|
| 連続した複数のアニメーションを再現できる。 | 2点間の遷移のみ。 |
| アニメーションの細かな設定を行うことが可能。 | 簡単な設定が可能。 |
| 再生のきっかけは不要。 | 再生のきっかけが必要。 |
ホームページの表現力アップ！CSSを使ったアニメーションについて
CSS3の普及がすすみ、今ではCSSだけでホームページに動きをつけられるようになっています。CSSアニメーションを例をあげて説明します。
「animation」のプロパティ
「transition」との違いがわかったところで、実際に「animation」を使って動きを付けていきましょう！
「animation」と「@keyframes」の関係
では実際に「animation」を使って動きを付けていきましょう。
実は、「animation」と「@keyframes」、どちらか一方の CSSを指定しただけでは動きをつけることはできません。
まず、動きをつけたい要素 を「animation」で指定し、そのアニメーションの細かな設定を「@keyframes」で指定する必要があります。
そのため、「animation」と「@keyframes」は必ずセットで指定する、ということを忘れないようにしましょう。 「@keyframes」では、アニメーションの途中の動きやプロパティを細かくCSSで調整できます。
基本の記述
まずは基本的な記述です。
「animation-box」というクラス名が付与された要素を動かす記述です。「animation-name」でアニメーションに任意の名前、「animation-duration」でアニメーションのスピード、「animation-iteration-count」でアニメーションを繰り返す回数をそれぞれ指定しています。
ここで紹介したプロパティの他にも種類があり、アニメーションの詳細な設定を行うことができます。こちらは後ほどご紹介いたします。
また、「background」を指定するときと同じように、すべてのプロパティを一括で指定できるショートハンドもありますので、慣れてきたらショートハンドでの記述が楽です。
「@keyframes」を指定する際は、先頭に@をつけるのを忘れないようにしましょう。
先ほどアニメーションにつけた任意の名前を最初に指定します。今回つけた名前は「sample-animation」です。
次に、アニメーション のつなぎの動きを指定しています。アニメーションにかかる時間をパーセントで表しており、0%～100%までの動きを段階的に刻むことで、細かい動きの実装をすることが可能です。
改めて今回の記述を解説すると、「animation-box」というクラス名が付与された要素に、2秒かけて0%から100%に幅が広がる「sample-animation」というアニメーションを指定したことになります。
また、最初と最後のみ指定する場合は、下記のように「from」と「to」で指定することも可能です。
プロパティの種類
ここからは、アニメーションのプロパティを紹介していきます。
指定できるプロパティと、その初期値は下記になります。
各プロパティの解説と初期値
| プロパティ名 | 解説 | 初期値 |
|---|---|---|
| animation-name | アニメーションにつける名前 | none |
| animation-iteration-count | 繰り返す回数 | 1 |
| animation-timing-function | 加速度（イージング） | ease |
| animation-duration | アニメーション全体にかかる時間 | 0s |
| animation-delay | アニメーションが始まるまでの時間 | 0s |
| animation-fill-mode | アニメーションの、開始と終了時の状態 | none |
| animation-direction | 再生方向（順番・逆再生） | normal |
| animation-play-state | 再生・停止 | running |
| animation | 一括でプロパティを指定できるショートハンド | 上記プロパティの各初期値と同じ |
【CSSで画像デザイン】ソフト不要＆コピペOK！CSSだけで画像を加工する方法
CSSを使って画像を簡単にデザインする方法を紹介します。コピペで簡単に実装&加工ソフト不要なので、ホームページやブログに掲載する画像をおしゃれにデザインしたい方必見！
パターンを実例とともに紹介
先ほど紹介したアニメーションのプロパティですが、指定できる種類が多くあり、覚えるのはなかなか難しいかもしれません。
そこで、実際に各プロパティの動きを確認しながら解説していきたいと思います。
「animation-name」
アニメーションの名前を指定するプロパティです。
名前は任意でつけられますので、編集する人が動きをイメージしやすいものにしましょう！
「animation-iteration-count」
アニメーションの繰り返しをどのようにするかを指定します。
直接数値で繰り返したい数を指定するか、「infinite」で無限に繰り返すかを指定できます。
「animation-timing-function」
アニメーションの加速度（イージング）が指定できます。
このプロパティを指定することで、アニメーションのクオリティに大きな差が生まれます。上手く使いこなせるようにしましょう。
下記のイージングを指定でき、それぞれの動きによって与える印象はかなり異なります。
| ease | アニメーションの始まりと最後をゆっくりに |
| linear | 開始から終了まで一定の速度で再生 |
| ease-in | ゆっくり動き出し、徐々に速く |
| ease-out | 開始時は早く、徐々にゆっくり |
| ease-in-out | アニメーションの始まりと最後がゆっくり。 「ease」をさらにゆっくり変化させるイメージ。 |
| step-start | アニメーションが始まると同時に最後の段階へ変化。 |
| step-end | アニメーション終了時に、一気に最後の段階へ変化。 |
| cubic-bezier(n,n,n,n) | デフォルトのイージング以外の指定を自由に実装できます。3次ベジェ曲線で動きを制御しているため、少し難しいかもしれません。 ただ現在は、下記のような便利なサイトもあるので、是非利用して動きを確認しながら設定してみましょう。 Ceaser – CSS Easing Animation Tool – Matthew Lein |
こちらが実際の各イージングになります。
ease
linear
ease-in
ease-out
ease-in-out
step-start
step-end
cubic-bezier(n,n,n,n)
サイトの雰囲気やターゲットに合った、かっこいい動きを見つけましょう。
特に最近のサイトでは、アニメーション部分に必ず「animation-timing-function」が指定されているといっても過言ではありません。
実装しながら慣れていくことが大切です。
「animation-duration」
アニメーション全体にかかる時間を指定します。
単位は秒（s）とミリ秒（ms）があり、小数点での指定も可能です。
「animation-delay」
こちらは、アニメーションが始まるまでの時間を調整できるプロパティです。
あえて遅らせたりする場合に設定します。
「animation-fill-mode」
アニメーションの実行前後に適用するCSSスタイルを設定します。
| none | アニメーションの実行前や終了時にCSSスタイルを適用しません。 |
| forwards | 終了時のCSSスタイルをそのまま 維持します。 |
| backwards | 終了時に、アニメーションが実行される前のCSSスタイルを維持します。 |
| both | forwardsとbackwardsの両方が適用されます。 |
「animation-direction」
アニメーションを再生させる方向を指定します。
少しイメージしづらいかもしれませんので、動きを確かめながら慣れていきましょう。下記の値を設定できます。
| normal | 0％から100％に向かって、通常通り再生されます。 |
| reverse | 100％から0％に向かって、通常とは逆方向に向かって再生されます。 |
| alternate | アニメーションを順方向から逆方向へ交互に再生します。 このプロパティを指定することで、動きが途切れず再生されます。 |
| alternate-reverse | 逆方向から順方向へ交互に再生します。「alternate」の逆方向バージョンです。 |
「animation-play-state」
アニメーションを再生・停止させる指定になります。
動きの途中で停止させたり、そこから再生させたり、といったイメージです。
初期値は「running」で、アニメーションを再生させます。「paused」でアニメーションが停止します。
「animation」でプロパティを一括で指定
上記で解説してきたプロパティですが、個別で指定していくのは効率が悪い場合もあります。
そのような場合は、「animation」を使うことで「background」を指定するときのように一括でプロパティの指定ができます。
「animation-duration」と「animation-delay」についてはどちらも秒数を指定するため、先に指定した数値が「animation-duration」になり、後から指定された数値が「animation-delay」となります。気をつけて指定しましょう。
その他のプロパティは順不同で実装可能です。
複数のアニメーション
幅を変えながら背景色を変化させるといった、複数のアニメーションを実装することもできます。
複数指定する場合は、実装したい「animation」をカンマ（,）で区切ります。
幅と背景色を同時に変化
まとめ
今回は、CSSでアニメーションを実装できる機能「animation」と「@keyframes」の概要やプロパティについて紹介してきました。今ではほとんどのサイトで使用されている機能ですが、各プロパティの意味まで完璧に理解して使っている方は多くないかもしれません。
細かい動きまで自由自在に操れるようになるには、実際にCSSを触りながら動きを把握していくしかありません。
さらに慣れてきたら、JavaScriptやjQueryなどと組み合わせて、より細かい動きや複雑なアニメーションの実装を試してみてください。
まずは、よく使いそうなアニメーションからでも覚えていくのがおすすめです。
