【HTML/CSS】@keyframesとanimationの使い方

こんにちは、Ryohei（@ityryohei）です！

CSSの@keyframesとanimationにより、JavascriptやjQueryを記述することなくアニメーションを実現できるようになりました。

ここでは@keyframesとanimationの概要と、基本的な使い方をご紹介したいと思います！

@keyframesとは

@keyframesはアニメーションの動きを制御する規則です。CSSでアニメーションを実現する際は基本的に@keyframes、animationと組み合わせて利用します。

@keyframesはアニメーションで描かれる開始～中間～終了といった一連の流れを制御し、制作者の意図した動きを実現することができます。以下のように記述します。

@keyframes 任意の名前 {
  0% {
    プロパティ: 値;
  }
  100% {
    プロパティ: 値;
  }
}

@keyframes 任意の名前 {
  from {
    プロパティ: 値;
  }
  to {
    プロパティ: 値;
  }
}

0%～100%、from～toも同じ意味で、アニメーションの開始と終了を表しています。0%（from）に記述された内容で動き出し、100%（to）に記述された内容で動きを止めます。

例として、フォントにカラーを徐々に変化させるアニメーションを付加するとした場合、以下のように記述します。

@keyframes fontColor {
  0% {
    color: #ff7f7f;
  }
  25% {
    color: #ff7fff;
  }
  50% {
    color: #7f7fff;
  }
  75% {
    color: #7fffff;
  }
  100% {
    color: #7fffbf;
  }
}

.changeFontColor {
  animation-name: fontColor;
  animation-duration: 6s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}

See the Pen keyframes - ChangeFontColor by Ryohei (@intotheprogram) on CodePen.

上記の例では一度のアニメーション時間を3秒とし、3秒の間の変化を@keyframesで設定しています。徐々にフォントカラーが変化しているかと思います。アニメーション中に@keyframesで指定したパーセンテージに到達するとフォントカラーが変化します。（ここではフォントカラーの変化の他に繰り返し再生とアニメーションを折り返しするように記述していますが、animationについては後ほど詳しくご紹介します。）

@keyframesにはCSSで指定できるプロパティを使用できるため、widthやheightで要素の大きさを変化させたり、transformで要素に変化を付けたり、positionを指定して要素を左から右、上から下に移動させたりといった様々な動きを付けることが可能になります。

animationとは

animationは@keyframesで定義した内容にどのような動きをさせるかを決めるプロパティになります。セレクタ（要素名やid、class等）の中に指定することで動作します。

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

animation-name	アニメーションの名前を指定します。
animation-duration	アニメーションの開始～終了までの時間を指定します。
animation-delay	アニメーションの開始時間を指定します。
animation-direction	アニメーションを再生する方向を指定します。
animation-fill-mode	アニメーション開始前、終了後にスタイルを維持するかを指定します。
animation-iteration-count	アニメーションの再生回数を指定します。
animation-play-state	アニメーションの実行、停止状態を指定します。
animation-timing-function	アニメーションの再生方法（動作）をイージング等で指定します。

以下で各プロパティの内容を詳しくご紹介します。

※本記事ではベンダープレフィックスの記述はしておりませんが、実際に利用する場合はベンダープレフィックス（-webkit-等）も一緒に指定することをおすすめします。

animation-name

animation-nameプロパティには、要素に付加するアニメーション名を指定します。アニメーション名というのは@keyframesに設定した名前を指します。

具体的には以下のように記述します。

HTML

<p class="animation">Animation Name</p>

CSS

@keyframes animation {
  //プロパティ
}
.animation {
  animation-name: animation;
}

上記例の場合、アニメーション名は「animation」となります。指定はこれで完了ですが、これだけではアニメーションは始まりません。animation-durationプロパティで開始から終了までの時間を指定する必要があります。

animation-duration

animatin-durationプロパティでは、一回分のアニメーションの時間の長さ（開始から終了まで）を指定します。指定できる単位は秒（s）、ミリ秒（ms）です。 durationの意味には期間とか持続等があるようです。

もし一回のアニメーション時間を3秒としたい場合は、以下のように記述します。

CSS

@keyframes animation {
  //プロパティ
}
.animation {
  animation-name: animation;
  animation-duration: 3s;
}

See the Pen keyframes - animation-duration by Ryohei (@intotheprogram) on CodePen.

animation-delay

animation-delayはアニメーション開始する時間を指定することができます。アニメーションの開始を遅らせたい場合に有効です。

もし3秒後にアニメーションを開始したい場合は以下のように記述します。

CSS

@keyframes animation {
  //プロパティ
}
.animation {
  animation-name: animation;
  animation-duration: 3s;
  animation-delay: 3s;
}

See the Pen keyframes - animation-delay by Ryohei (@intotheprogram) on CodePen.

animation-direction

animation-directionはアニメーションの再生方向を設定するプロパティです。

@keyframes animation {
  //プロパティ
}
.animation {
  animation-name: animation;
  animation-direction: 値;
}

設定できる値には以下のものがあります。

normal	normalは@keyframesの「0%～100%（from～to）」の順方向に再生します。こちらがanimation-directionの初期値となります。
reverse	reverseは@keyframesの「100%～0%（to～from）」の順方向とは逆向きに再生します。
alternate	alternateは@keyframesの「0%～100%～0%（from～to～from）」の流れで再生します。順方向に再生後、反転して再生します。
alternate-reverse	alternate-reverseは@keyframesの「100%～0%～100%（to～from～to）」の流れで再生します。逆方向に再生後、反転して再生します。

See the Pen keyframes - animation-direction by Ryohei (@intotheprogram) on CodePen.

animation-fill-mode

animarion-fill-modeはアニメーション後に設定するスタイルを決めるプロパティになります。値によっては、アニメーション前後に@keyframesのスタイルを適用することが可能になります。

@keyframes animation {
  //プロパティ
}
.animation {
  animation-name: animation;
  animation-fill-mode: 値;
}

設定できる値には以下のものがあります。

none	アニメーション再生前後は元の要素に設定されているスタイルで表示されます。noneはanimation-fill-modeの初期値になります。
backwards	backwardsはアニメーション再生後、元の要素に設定されているスタイルで表示されます。アニメーションが開始されるまでは「0%」もしくは「from」に設定されているスタイルが適用されます。
forwards	forwardsはアニメーション再生後、@keyframesの「100%」もしくは「to」のスタイルが適用されます。アニメーションが開始されるまでは元の要素に設定してあるスタイルで表示されます。
both	bothはアニメーション再生後、@keyframesの「100%」もしくは「to」のスタイルが適用されます。アニメーションが開始されるまでは「0%」もしくは「from」に設定されているスタイルが適用されます。backwardsとforwardsを合わせたものとなります。

以下animation-fill-modeのサンプルです。アニメーション前のスタイルがわかりやすくなるようにanimation-delayを設定しています。

See the Pen keyframes - animation-fill-mode by Ryohei (@intotheprogram) on CodePen.

animation-iteration-count

animation-iteration-countはアニメーションが停止するまでの再生回数を指定します。

@keyframes animation {
  //プロパティ
}
.animation {
  animation-name: animation;
  animation-iteration-count: 値;
}

数値を指定すると再生回数となり、infiniteを入れると繰り返し再生となります。

See the Pen keyframes - animation-iteration-count by Ryohei (@intotheprogram) on CodePen.

animation-play-state

animation-play-stateはアニメーションに対して再生や一時停止といった状態を指定することができます。

以下、設定できる値となります。

running	runningを指定することでアニメーションは再生状態となります。こちらはanimation-play-stateの初期値です。
paused	pausedを指定するとアニメーションは停止状態となります。停止が解除されるとアニメーションは停止箇所から開始されます。

例えば再生中のアニメーション要素にカーソルを合わせるとアニメーションが停止するようにしたい場合は以下のように記述します。テキストにカーソルを合わせるとアニメーションが停止し、外すと再開されます。

@keyframes animation {
  //プロパティ
}
.animation {
  animation-name: animation;
  animation-play-state: running;
}
.animation:hover {
  animation-play-state: paused;
}

See the Pen keyframes - animation-play-state by Ryohei (@intotheprogram) on CodePen.

animation-timing-function

animation-timing-functionはアニメーション再生中の進行方法に変化を付けることができます。

以下のように記述します。

@keyframes animation {
  //プロパティ
}
.animation {
  animation-name: animation;
  animation-timing-function: 値;
}

以下、設定可能な値のサンプルです。他にcubic-bezierやstepsを使って変化の具合を設定することができます。

See the Pen keyframes - animation-timing-function by Ryohei (@intotheprogram) on CodePen.

以上、@keyframesとanimationの使い方のご紹介でした！

CSSアニメーションの参考にしていただければ幸いです。