CSS アニメーション(CSS Animation)の作り方

CSS3 アニメーションは、過去のウェブ環境ではFlash, Animation GIFなどを用いてアニメーションを実現させましたが、今はCSSやJavaScriptだけで色んなアニメーションが可能になりました。

CSSアニメーションは、一見複雑に見えますが、アニメーションの基本構成は簡単です。まずアニメーションを定義し、特定のHTML要素にそれを割り当てるだけです。

これはアニメーションについて記述するスタイルと、アニメーションの開始と終了の CSS スタイルを設定するキーフレーム(keyframe)で実現できます。

@keyframe 規則を定義する

CSSのアニメーションは、「色」「背景色」「横幅」「高さ」などの多くのCSSプロパティをアニメーションに使うことができます。

各アニメーションは、3D CGアニメーションのようにキーフレーム「@keyframes」規則で定義する必要があります。

それはアニメーション中に特定の時間に何をどうするかを定義します。

各キーフレームは、アニメーションの流れの中で要素がどのように表現されるかを記述します。 CSS スタイルでアニメーションのタイミングを定義するため、キーフレームを percentage で指定し、アニメーションの流れの中でいつそのスタイルが適用されるかを示します。

CSS アニメーションの流れ (シーケンス) を作成するには、@keyframe 宣言内でそれぞれのキーフレーム(keyframe)を定義する２つの方法があります。

一つは「from」と「to」のキーワード、または「%：パーセンテージ」で表示させます。

これを使ってアニメーションさせたい要素にアニメーションの再生時間と長さ、そしてアニメーションをどのように進めていくかの詳細などanimation プロパティを設定します。

例えば、電車アニメーションの制作する場合、下記のようにキーフレームに「%：パーセンテージ」をつけます。

パーセンテージを使用してキーフレームを定義するには、0％のキーフレームで開始し100％まで動作つけます。

0％と100％の間の任意のパーセンテージを使用した動作は、より多くの柔軟性を保ちます。また「from」と「to」のキーワードと混在することができます。

@keyframes speed {
　0% {transform: translateX(0);}
　100% {transform: translateX(650px);}
}
  </style>

「0%」と「100%」の代わりに、それぞれキーワードの「from」と「to」に書きかえれます。

@keyframes speed {
　from {transform: translateX(0);}
　to {transform: translateX(650px);}
}
  </style>

キーフレームの宣言ブロックを作成したら、これでHTML要素、要素にアニメーションを割り当てる準備が整いました。ここでアニメーションプロパティのリストを簡単に紹介します。

animationサブプロパティ

animation-delay	読み込まれる要素とアニメーションが開始するまでの待ち時間を設定する。
animation-direction	アニメーションのサイクル完了時に、逆方向にアニメーションして繰り返すか、始めの状態にリセットしてアニメーションを繰り返すかを設定する。
animation-duration	1 回のアニメーションサイクルにかかる時間の長さを設定する
animation-iteration-count	アニメーションが行われる回数を設定する。
animation-name	アニメーション操作に必要なキーフレーム @keyframes 規則の名前を指定する
animation-play-state	アニメーションを一時停止・再生したりする設定。
animation-timing-function	アニメーションの進め方を設定する。「ease 」や「linear」のような加速曲線を定義することで、キーフレーム間のアニメーションをどのように進めていくかを表します。
animation-fill-mode	アニメーションの実行前後に、「値」をとう適用するかを設定する。

 <style>
　.plane {
　　animation-name: speed;
　　animation-duration:2s;
　}
 </style>

animation-name: speed;

要素にキーフレームアニメーションを適用する場合に、アニメーション名(上記の場合は、speed)を指定する。

animation-duration:2s;

1 回のアニメーションを再生する持続時間の長さ(上記の場合は、2秒)を設定する。

それでは、上記のCSSをHTMLの画像要素に割り当てます。

  <body>
    <img src="/images/plane.png" class="plane">
  </body>

  <body>
    <img src="/images/plane.png" class="plane">
  </body>

.train {
animation-name: speed;
animation-duration: 2s;
}

@keyframes speed {
0% {transform: translate(0);}
to {transform: translate(650px);}
}