CSSアニメーションanimationプロパティと@keyframes

トッド

CSSで簡単なアニメーションをさせる方法には、 transition プロパティを使う手段がありますが、
より複雑で詳細なアニメーションを再現しようと思ったら、 animation プロパティを使用する必要があります。

CSSでアニメーション作りたい時ってありますよね。例えば、マウスカーソルをある要素に重ねた時に背景色を変更するとか……

そういうのは、transitionプロパティを使えば簡単にできるのです。

transitionプロパティのことなら

今回のトピックは、animationプロパティについてです。transitionプロパティで実装するアニメーションよりも、より複雑なものを考る際は、animationプロパティが役立つでしょう。

animationプロパティは、transitionプロパティと比べると少し設定項目が多いですが難しい事はありません。

まずは、指定する項目について見ていきましょう。上記画像はanimationプロパティのショートハンド(まとめて記述する方法)で記述したときの全体的なイメージです。

一個づつ、値の概要を見ていきましょう。

animation-name = 名前

animation-nameは、あらかじめ作成しておいたアニメーション名を記述します。アニメーションの作成には@keyframesを使用します。

@keyframesはこのように使用します。

@keyframesの書き方

@keyframes moved {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(190px);
  }
}

上記のサンプルでは、moved という名称のアニメーションを作成したことになります。波括弧の中では、0%~100%という風に始点・終点と２フレームのアニメーションを表しています。

サンプルのように始点と終点のみを要する場合は、from(0%) と to(100%) に置き換えて記述することもできます。

また、0%~100%という割り方ではなく、0% 25% 50% 75% 100% というように工夫次第で分割数を増やしたアニメーションを作成することも可能です。

animation-nameに記述する名前は言わば、@keyframesで作成し土台となるアニメーションの名称を登録するイメージですね。

animation-duration = 時間

animation-durationは、アニメーションをどれくらいの長さで行うのか？を決める値が入ります。単位は(s)(ms)で記述します。

例えば、2sと記述すればアニメーションは２秒かけて始点から終点へと向かいます。

animation-timing-function = 時間関数

animation-timing-functionは linear、 ease、 ease-in、 ease-out、 ease-in-out、 steps()、 cubic-bezier()というような値が用意されています。

それぞれの値を指定することでアニメーション全体の進行に抑揚を持たせることができます。

詳しい情報はこちらのページでイメージし易いようにまとめました。

イージングの詳細はこちら

animation-delay = 遅延

animation-delayは、アニメーションの開始までの遅延時間を指定します。単位は(s)(ms)で指定します。

例えば、0.5sと記述した場合は0.5秒後にアニメーションが開始するようにできます。

animation-iteration-count = 回数

animation-iteration-countは、そのアニメーションを何回実行するのかを数値で指定します。

例えば、3 と指定した場合はアニメーションを3回繰り返します。また、infinite を指定した場合は無限ループで繰り返します。

animation-direction = 折り返し

animation-directionは、アニメーションの折り返し方向に対してのルールを指定します。

値には、normal reverse alternate alternate-reverseの4つがあります。初期値はnormalです。

reverseを指定した場合は、animation-nameで指定したアニメーションを終点から始点へ向けて行います。

alternateを指定した場合はもし、animation-iteration-countの数値を偶数値にした場合にアニメーションの進行が始点から終点、終点から始点というように折り返しのある進行になります。

animation-fill-mode = 終始の決まり

animation-fill-modeはanimation-iteration-countの値がinfiniteでないときに実行したアニメーションの終了時に、始点もしくは終点どちらかにスタイルを維持したい時に使用します。

値には none、 forwards、 backwards、 both 、の4つがあります。

none の場合は、アニメーションの再生後に適応されるスタイルは要素に指定されている元のスタイルです。

forwards の場合は、アニメーションの再生後に適応されるスタイルはキーフレームで指定した100%のスタイルが適応されます。なお、animation-delayが指定されている場合はアニメーションが再生されるまでの間は要素に指定されている元のスタイルが適応されます。

backwards の場合は、アニメーションの再生後に適応されるスタイルは要素に指定されている元のスタイルです。なお、animation-delayが指定されている場合はアニメーションが再生されるまでの間はキーフレームで指定されている0%のスタイルが適応されます。

both の場合は、アニメーション再生後のキーフレーム100%指定されたスタイルが適応されます。なお、animation-delayが指定されている場合はアニメーションが再生されるまでの間はキーフレーム0%のスタイルが適応されます。