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

こんにちは。

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

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

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

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

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

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

・基本的な使用手順

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

1 animationとは
2 animationの基本的な使い方
3 まとめ

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アニメーションの実装方法を手順ごとに解説していきます。

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

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

<!-- HTML -->
<div class="sphere"></div>

1 2	<!-- HTML --> <div class="sphere"></div>

// CSS
.sphere {
  width: 50px;
  height:50px;
  border-radius:50%;
  background-color: red;
  position:relative;
  top:0;
  z-index: 1;
}

// CSS

.sphere {

width: 50px;

height:50px;

border-radius:50%;

background-color: red;

position:relative;

top:0;

z-index: 1;

}

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

@keyframes を指定する

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

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

@keyframes アニメーションの名前 {
  アニメーション
}

@keyframes アニメーションの名前 {

アニメーション

}

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

@keyframes move_sphere {

}

@keyframes move_sphere {

}

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

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

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

@keyframes アニメーション名 {
  0% { //アニメーション開始
    プロパティ: 値;
    プロパティ: 値;
  }
  ◯% {
    プロパティ: 値;
    プロパティ: 値;
  }
  ◯% {
    プロパティ: 値;
    プロパティ: 値;
  }
  100% { //アニメーション終了
    プロパティ: 値;
    プロパティ: 値;
  }
}

@keyframes アニメーション名 {

0% { //アニメーション開始

プロパティ: 値;

}

◯% {

プロパティ: 値;

}

◯% {

プロパティ: 値;

}

100% { //アニメーション終了

プロパティ: 値;

}

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

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

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

@keyframes move_sphere {
 0% {
   left:0;
 }
 50% {
   background-color: blue;
 }
 100% {
   left:100%;
 }
}

@keyframes move_sphere {

0% {

left:0;

}

50% {

background-color: blue;

}

100% {

left:100%;

}

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

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

animationプロパティを指定する

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

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

.sphere {
  width: 50px;
  height:50px;
  border-radius:50%;
  background-color: red;
  position:relative;
  top:0;
  z-index: 1;
  animation-name: move_sphere; // キーフレームで指定したアニメーション名
  animation-duration: 3s; // 3秒かけてアニメーションを実行
  animation-timing-function: linear; // 等速でアニメーションを実行
  animation-iteration-count: 3; // 3回繰り返す
  animation-direction: alternate; // 再生が終わったら逆再生を行う。
}

@keyframes move_sphere {
 0% {
   left:0;
 }
 50% {
   background-color: blue;
 }
 100% {
   left:100%;
 }
}

.sphere {

width: 50px;

height:50px;

border-radius:50%;

background-color: red;

position:relative;

top:0;

z-index: 1;

animation-name: move_sphere; // キーフレームで指定したアニメーション名

animation-duration: 3s; // 3秒かけてアニメーションを実行

animation-timing-function: linear; // 等速でアニメーションを実行

animation-iteration-count: 3; // 3回繰り返す

animation-direction: alternate; // 再生が終わったら逆再生を行う。

}

@keyframes move_sphere {

0% {

left:0;

}

50% {

background-color: blue;

}

100% {

left:100%;

}

これらを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

ウェブカツは「年収1000万円」を目指すフリーランスITエンジニアを育成するオンライン最大級のプログラミングスクールとして、元医師やBIG4税理士法人会計士など高学歴高経歴な方から、中卒土方、40代主婦、海外在住者など様々な方が通われています。
現役ITエンジニアとして活躍し、富裕層でプロのファイナンシャルプランナーでもある顧問「かずきち」が教える【フリーランスITエンジニアになって10年で1億の資産を築く方法】など他のプログラミングスクールとは全く異なり、「転職をゴール」とはせずに「会社に依存せずに外で稼げる力」を身につけさせています。