CSS3 アニメーション

CSS3 アニメーションを使用すると、JavaScript や Flash を使用することなく、要素をあるスタイルから別のスタイルへと滑らかに変化させることができます。

1. CSS3 アニメーションとは

アニメーションは、要素のスタイルを時間の経過とともに変化させるものです。CSS3 では、変更したいプロパティと、その変化が発生するタイミングを指定することで、アニメーションを定義できます。

アニメーションを実装するには、主に以下の 2 ステップが必要です。

1. @keyframes ルールを使用してアニメーションを定義する。
2. 定義したアニメーションを特定の要素に バインド（紐付け） する。

2. @keyframes ルール

@keyframes ルール内で CSS スタイルを指定することで、アニメーションの各ステップ（キーフレーム）を定義します。

2.1 スタイルの変化を定義する

アニメーションが開始されるとき（0%）と終了するとき（100%）のスタイルを指定します。

/* "example" という名前のアニメーションを定義 */
@keyframes example {
  from {background-color: red;} /* 開始時のスタイル */
  to {background-color: yellow;} /* 終了時のスタイル */
}

注意：アニメーションを機能させるには、必ずアニメーションを要素にバインドする必要があります。

3. アニメーションを要素にバインドする

アニメーションを実行するには、少なくとも以下の 2 つを指定する必要があります。

1. animation-name：適用するアニメーションの名前。
2. animation-duration：アニメーションが 1 サイクル完了するまでの所要時間。

注意： animation-duration プロパティを指定しなかった場合、デフォルト値は 0 であるため、アニメーションは実行されません。

3.1 バインドの実装例

以下の例では、<div> 要素に対して 4 秒間のアニメーションを適用しています。

div {
  width: 100px;
  height: 100px;
  background-color: red;
  /* "example" アニメーションをバインド */
  animation-name: example;
  /* 4秒間かけて実行 */
  animation-duration: 4s;
}

3.2 パーセンテージを使用した詳細な制御

from と to（0% と 100%）の代わりにパーセンテージを使用することで、より多くのステップを追加できます。

/* 複数のステップを持つアニメーションの定義 */
@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

3.3 座標移動を含むアニメーション

背景色だけでなく、要素の位置（left, top）なども変化させることができます。この際、要素の position は relative などに設定されている必要があります。

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}

4. 遅延、繰り返し、方向の制御

アニメーションの挙動をより詳細にカスタマイズするためのプロパティを解説します。

4.1 アニメーションの遅延 (animation-delay)

animation-delay プロパティは、アニメーションが開始されるまでの待機時間を指定します。

div {
  animation-delay: 2s; /* 2秒後に開始 */
}

負の値を指定すると、アニメーションは即座に開始されますが、その秒数分すでに進行した状態からスタートします。

4.2 繰り返し回数 (animation-iteration-count)

animation-iteration-count プロパティで、アニメーションを何回繰り返すかを指定します。infinite を指定すると、永久に繰り返されます。

div {
  /* 3回繰り返す */
  animation-iteration-count: 3;
}

#infinite-box {
  /* 無限に繰り返す */
  animation-iteration-count: infinite;
}

4.3 再生方向 (animation-direction)

animation-direction プロパティは、アニメーションを順方向に再生するか、逆方向に再生するか、あるいは交互に再生するかを指定します。

• normal: 順方向（デフォルト）。
• reverse: 逆方向。
• alternate: 奇数回は順方向、偶数回は逆方向に再生。
• alternate-reverse: 奇数回は逆方向、偶数回は順方向に再生。

div {
  /* 毎回往復するようにアニメーションさせる */
  animation-direction: alternate;
}

5. スピード曲線 (animation-timing-function)

animation-timing-function プロパティは、アニメーションの速度変化を指定します。

• ease: ゆっくり始まり、速くなり、ゆっくり終わる（デフォルト）。
• linear: 最初から最後まで一定の速度。
• ease-in: ゆっくり始まる。
• ease-out: ゆっくり終わる。
• ease-in-out: ゆっくり始まり、ゆっくり終わる。
• cubic-bezier(n,n,n,n)：独自の速度曲線を定義。

6. 終了状態の保持 (animation-fill-mode)

通常、アニメーションは終了すると元のスタイルに戻ります。animation-fill-mode を使用すると、アニメーション開始前や終了後のスタイルを要素に適用させたままにできます。

• none: デフォルト。アニメーション前後でスタイルを適用しない。
• forwards: 終了時のスタイルをそのまま維持する。
• backwards: 開始前（遅延時間中）に、最初のキーフレームのスタイルを適用する。
• both: forwards と backwards の両方を適用する。

div {
  /* アニメーションが終わった状態のままにする */
  animation-fill-mode: forwards;
}

7. ショートハンドプロパティ

アニメーションに関する多くのプロパティは、animation という 1 つのショートハンドプロパティにまとめて記述できます。

7.1 ショートハンドの構文

animation: name duration timing-function delay iteration-count direction fill-mode;

div {
  /* 5秒間、linearで、2秒遅延、無限ループ、交互再生 */
  animation: example 5s linear 2s infinite alternate;
}

8. アニメーションプロパティ一覧