【CSS】animationプロパティの使用手順を徹底解説!!

こんにちは。

HTML・CSSの勉強を大体終えると、次は動的なWebサイトが作りたいな〜ということで JavaScript や jQuery の勉強に入る人も多いはず…

ですがご存知でしょうか?

CSSだけでもアニメーションを実装できることを!!

 でも動的なことをするのってJavaScriptがないとダメじゃなかったっけ?

確かに否定はしませんが、今は animation というCSSだけでアニメーションを実装するためのCSSプロパティが用意されています。

そこで今回は、animation プロパティの

・基本的な使用手順

を初学者の方に向けて一つ一つ順を追って解説していきます!

animationとは

CSSのアニメーションとは?

animation を解説する前に、そもそもCSSアニメーションとは何かを解説します。

結論から言うと、

CSSだけで実装するアニメーション

です。そのままやないかい!!と思うかもしれませんが、通常、アニメーションを実装する際には JavaScript などのプログラミング言語が必要になりますが、CSSアニメーションはこうしたプログラミングをすることなく実装できます。

animationの読み方

animation は「アニメーション」と読みます。

アニメと聞くとワンピースやドラゴンボールなどを想像するかもしれませんが、本来のアニメーションとは静止画を時間ごとに動かすことを指します。

animation プロパティも原理は同様で、静的なCSSを時間をかけて動かすことによってアニメーションを実装します。

animationはアニメーション関連のプロパティをまとめて指定できるプロパティ

animationの用途を具体的に言うと、

アニメーション関連のプロパティをまとめて指定できるプロパティ

です。

CSSには「animation-name」や「animation-delay」、「animation-timing-function」など様々なCSSアニメーション関連のプロパティがあるのですが、animation プロパティはこれらのプロパティを一括で指定できるプロパティになります。

animationで利用できるプロパティ

animation プロパティでは空白区切りで以下の6つのanimation関連のプロパティを順不同で指定できます。

animation では以下のプロパティを設定することができます。

プロパティ 説明
animation-name  キーフレームで指定したアニメーションの名前を指定します。
 animation-duration  アニメーションの再生時間を指定します。
 animation-timing-function  アニメーションの再生速度の変化パターンを指定します。
 animation-delay  アニメーションの再生時間を遅らせることができます。
 animation-iteration-count  アニメーションを何回繰り返して再生させるのかを設定します。
 animation-direction  再生の際に逆再生をさせるかどうか、または繰り返し再生する中でのどのタイミングで逆再生させるのかを設定できます。

また、これら6つのプロパティは全て必須で設定する必要はありませんが、「animation-duration」は必ず設定してください。

MEMO
animation-duration(再生時間)は必ず設定する。

対応ブラウザ

対応ブラウザは以下の通りです。

PC用ブラウザ 対応状況
Chrome 完全対応
Edge 完全対応
Firefox 完全対応
Internet Explorer 完全対応
Opera 完全対応
Safari 完全対応
スマートフォン用ブラウザ 対応状況
Android webview 完全対応
Android版Chrome 完全対応
Android版Firefox 完全対応
Android 版 Opera 完全対応
iOS版Safari 完全対応
Samsung Internet 完全対応

animationの基本的な使い方

ここでは animation プロパティを使用したCSSアニメーションの実装方法を手順ごとに解説していきます。

アニメーションさせる元の要素を用意する

まずはアニメーションで動かす元の要素を用意しましょう。

今回は上の画像のような赤い球体を用意しました。これを画面の左端と右端を往復するアニメーションを実装していきます。

@keyframes を指定する

CSSアニメーションを実装するには、キーフレームと言う仕様を用います。

キーフレームは普通のCSSプロパティとは違い、「@」を先頭に記載します。

今回はアニメーションの名前を「move_sphere」としておきましょう。

どうアニメーションさせるのかを指定する

続いてどう動かすのかを指定していきます。

アニメーションの遷移は以下のように記載していきます。

この「0%」や「◯%」、「100%」はアニメーションの再生時間の中の何%の時点でのCSSなのかを指します。「0%」はアニメーションの始点、「100%」はアニメーションの終点を表します。

{ } の中には遷移させるCSSを記載します。

今回は先ほどの球体を左端から右端に移動させるので、「left」プロパティの値を時間によって変更していきましょう。

移動させるだけではつまらないので50%地点で一回背景色を青色にしてみましょう。

これで下準備が整いました。

animationプロパティを指定する

最後に動かす要素に animation プロパティをつけていきましょう。

今回のアニメーションは以下のアニメーション関連のプロパティと同等の挙動をさせることを前提に指定していきます。

これらをanimation プロパティで一括で指定すると、

See the Pen
animation
by ryuga (@ryuga)
on CodePen.

となります。これで、赤い球体が画面左端から等速で移動して真ん中で背景色が青になり、再び背景色を赤色に変えながら画面右端に移動して再び同じ動きをして左端に移動するアニメーションができました。

また、「animation-iteration-count: 3; 」と指定しているので、アニメーションを3回(1.5周分)繰り返すと止まるようになっています。

このような手順を踏んで、CSSアニメーションを実装します。

まとめ

いかがでしょうか?

今回は animation プロパティの使用手順を解説していきました。

今までは JavaScript や jQuery を使用しないと実装できなかったアニメーションもこの animation プロパティの登場で軽量なアニメーションのほとんどが実装できるようになりました。

みなさんも JavaScript や jQuery の勉強を本格化させる前に一度 animation を使ってCSSアニメーションを実装してみてはいかがでしょうか!

参考文献:http://www.htmq.com/css3/animation.shtml