【CSSアニメーション】@keyframes・animationプロパティの使い方解説

【CSSアニメーション】@keyframes・animationプロパティの使い方解説

今回は、「@keyframes」を使用したアニメーションについて解説していきます。

「@keyframes はどうやって使うんだっけ？」という人や、「transition プロパティは知っているけど、@keyframes を使用したアニメーションはあまり知らない」っていう人は、この記事を見るだけで使い方をマスターできるようになります。

本記事でわかることは以下の通りです。

CSS アニメーションとは？

そもそも、CSS アニメーションとは何でしょうか？

「アニメーション」という単語の意味を検索すると「動画」と書かれています。
しかし、CSS アニメーションは動画というよりは、「HTML 要素に動きをつける / 変化をつける」という感じです。

この記事では、アニメーションという単語を使用していますが、「動き」、または「変化」という意味で読むと理解しやすいと思います。

transition との違い

@keyframes・animation プロパティと同様に、transition プロパティもアニメーションを付けられます。
transition プロパティについての詳しいことは、以下の記事を参考にしてください。

それぞれのプロパティのざっくりとした違いは、
「@keyframes・animation プロパティ」は複雑なアニメーションを指定できる、
「transition プロパティ」は簡単なアニメーションを指定できる、
です。

各プロパティの違いを以下にまとめておきます。

@keyframes / animation の関係

書き方などは後で詳しく書きますが、まずは @keyframes と animation のざっとした説明です。

@keyframes

「@keyframes」は、opacity や width などのスタイルをどのように変化させていくかを指定します。
例えば、最初は透明な状態（opacity: 0）から、だんだん不透明になって表示される（opacity: 1）という指定をします。

余談ですが、最初に「＠」がつくのはアットルールと呼ばれるものです。
「keyframes」には、最初に「@」を付けます。

animation

「animation」は、「@keyframes」で指定した動きをいつ開始するか、アニメーション時間や繰り返し回数などを指定します。

ざっくりとした理解は、
「@keyframes」は、アニメーションの「振る舞い」を指定する
「animation」は、要素にアニメーションを「設定」する
というイメージで良いと思います。

簡単なサンプル

文章だけで説明されても分からないと思いますので、簡単なサンプルを載せておきます。

<div class="sample-box"></div>

@keyframes sample-animation {
  /* 最初 */
  0% {
    width: 0;
    opacity: 0;
  }

  /* 最後 */
  100% {
    width: 100%;
    opacity: 1;
  }
}

.sample-box {
  height: 50px;
  background-color: blue;

  /* アニメーション設定 */
  animation: sample-animation 5s infinite;
}

まずは、「@keyframes」部分で以下のアニメーションの動きを指定しています。
・「sample-animation」というアニメーション名を設定
・最初（0%）は、「width: 0;」「opacity: 0;」で、幅0の透明ボックス
・最後（100%）は、「width: 100%;」「opacity: 1;」で、幅100%の不透明ボックス

次に、animation プロパティで、先ほど「@keyframes」でつけたアニメーション名と共にアニメーションの設定をしています。
このように書くことで、青色のボックスが透明から不透明に切り替わりながら、右方向に伸びていくアニメーションになります。

各プロパティについての詳細は、後述しています。

@keyframes の使い方（書き方）

@keyframes は一般的に以下のような書き方をします。

@keyframes アニメーション名 {
  0% {
  }
  100% {
  }
}

「@keyframes」の後に「アニメーション名」を指定します。
その後に、% などで詳しいアニメーションの動き（振る舞い）を指定します。

動きの部分で指定できる値は以下のように、「%」「from」「to」が使用できます。

これから、具体的に様々な書き方のパターンを見ていきます。

最初と最後を指定

アニメーションの最初と最後だけなら、「0%」と「100%」を指定します。

@keyframes sample-animation {
  /* 最初 */
  0% {
    width: 0;
    opacity: 0;
  }

  /* 最後 */
  100% {
    width: 100%;
    opacity: 1;
  }
}

また、「from」と「to」を使用して指定する方法もあります。

@keyframes sample-animation {
  /* 最初 */
  from {
    width: 0;
    opacity: 0;
  }

  /* 最後 */
  to {
    width: 100%;
    opacity: 1;
  }
}

上記のように、「0%」「100%」指定と「from」「to」指定は全く同じアニメーションになります。

最後だけ指定

アニメーションの最後だけを指定することもできます。

@keyframes sample-animation {
  /* 最後 */
  100% {
    width: 100%;
    opacity: 1;
  }
}

@keyframes sample-animation {
  /* 最後 */
  to {
    width: 100%;
    opacity: 1;
  }
}

こちらも同様に、「100%」指定と「to」指定は同じアニメーションになります。

パーセントで細かく指定

アニメーションの動きをパーセントで細かく指定することもできます。

@keyframes sample-animation {
  0% {
    width: 0;
    opacity: 0;
  }
  25% {
    width: 50%;
  }
  50% {
    width: 25%;
  }
  75% {
    width: 75%;
  }
  100% {
    width: 100%;
    opacity: 1;
  }
}

様々なプロパティのアニメーション

参考程度に、「width」「opacity」以外の他のプロパティでアニメーションさせてみます。

<div class="keyframes-sample-box"></div>

@keyframes keyframes-sample-animation {
  0% {
    background-color: blue;
  }

  25% {
    background-color: green;
  }

  50% {
    background-color: yellow;
    transform: translateX(100px) rotate(90deg) scale(1.5);
  }

  75% {
    background-color: red;
  }

  100% {
    background-color: blue;
    transform: translateX(0) rotate(0deg) scale(1);
  }
}

.keyframes-sample-box {
  width: 50px;
  height: 50px;

  /* アニメーション設定 */
  animation: keyframes-sample-animation 5s infinite;
}

animation 関連のプロパティ

animation プロパティは以下８つのプロパティのショートハンド（一括指定）です。

実際の記述方法は、以下のようになります。

animation を正しく設定するためには各プロパティの理解が必要のため、以降で各プロパティの説明をしていきます。

animation-name

animation-name は、アニメーションの名前を指定します。
アニメーション名は、他の物と被らないように注意しましょう。

実際には、以下のように使用します。

.sample-box {
  animation-name: sample-animation;
}

@keyframes sample-animation {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

「@keyframes」の後に指定しているアニメーション名と同じ名前を、「animation-name」にも指定します。
「@keyframes」と「animation-name」はどちらを先に書いても正常に動作します。

animation-duration

animation-duration は、アニメーション開始から終了までの時間(秒またはミリ秒)を指定します。
例えば、「animation-duration: 3s;」とした場合は、アニメーションが完了するまでの時間を3秒として設定しています。

初期値は「0s」のため、animation-duration を指定しない場合は、アニメーションは即時に完了し、パッと切り替わったように見えます。
では、さっそくコードを見ていきます。

animation-duration: 1s; を指定

アニメーション開始から終了までの時間が1秒になります。

<div class="sample-box"></div>

@keyframes sample-animation {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

.sample-box {
  height: 50px;
  background-color: blue;

  /* アニメーション設定 */
  animation-name: sample-animation;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

animation-duration: 3s; を指定

アニメーション開始から終了までの時間が3秒になります。

<div class="sample-box"></div>

@keyframes sample-animation {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

.sample-box {
  height: 50px;
  background-color: blue;

  /* アニメーション設定 */
  animation-name: sample-animation;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

animation-timing-function

animation-timing-function は、animation-duration で指定した時間内の変化の仕方を指定します。
animation-timing-function で指定できる主な値は以下の通りです。

上記以外の値もありますが、詳しくは以下を参照してください。

下記の動画は、animation-timing-function を指定したボックスが横移動しています。
横移動の仕方を見比べることで、変化の仕方の違いが分かります。

animation-delay

animation-delay は、アニメーションが開始するまでの遅延時間を指定します。
つまり、指定した時間が経過してから変化が始まるようになります。

animation-duration と同じように初期値は「0s」のため、指定していない場合は、アニメーションが即座に開始されます。

animation-delay: 2s; を指定

アニメーション開始までの遅延時間を2秒にしています。

<div class="sample-box"></div>

@keyframes sample-animation {
  100% {
    width: 100%;
  }
}

.sample-box {
  width: 50px;
  height: 50px;
  background-color: blue;
}

.sample-box:hover {
  /* アニメーション設定 */
  animation-name: sample-animation;
  animation-duration: 3s;
  animation-delay: 2s;
}

※青四角にマウスホバー or タップしてください（2秒後にアニメーション開始します）

animation-iteration-count

アニメーションの繰り返し回数を指定します。
指定できる値は以下の物があります。

animation-iteration-count: 3; を指定

アニメーションを3回繰り返します。

<div class="sample-box"></div>

@keyframes sample-animation {
  100% {
    width: 100%;
  }
}

.sample-box {
  width: 50px;
  height: 50px;
  background-color: blue;
}

.sample-box:hover {
  /* アニメーション設定 */
  animation-name: sample-animation;
  animation-duration: 3s;
  animation-iteration-count: 3;
}

※青四角にマウスホバー or タップしてください（アニメーションを３回行います）

animation-iteration-count: infinite; を指定

アニメーションを無限に繰り返します。

<div class="sample-box"></div>

@keyframes sample-animation {
  100% {
    width: 100%;
  }
}

.sample-box {
  width: 50px;
  height: 50px;
  background-color: blue;
}

.sample-box:hover {
  /* アニメーション設定 */
  animation-name: sample-animation;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

※青四角にマウスホバー or タップしてください（アニメーションが無限に繰り返されます）

animation-direction

アニメーションの再生方向を指定します。
指定できる値は以下の物があります。

<div class="sample-box direction-normal-box">
  normal
</div>
<div class="sample-box direction-reverse-box">
  reverse
</div>
<div class="sample-box direction-alternate-box">
  alternate
</div>
<div class="sample-box direction-alternate-reverse-box">
  alternate-reverse
</div>

@keyframes sample-animation {
  0% {
    width: 50px;
  }

  100% {
    width: 100%;
  }
}

.sample-box {
  height: 50px;
  background-color: blue;
  margin-bottom: 20px;
  color: skyblue;
  font-weight: bold;

  /* アニメーション設定 */
  animation-name: sample-animation;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

.direction-normal-box {
  animation-direction: normal;
}

.direction-reverse-box {
  animation-direction: reverse;
}

.direction-alternate-box {
  animation-direction: alternate;
}

.direction-alternate-reverse-box {
  animation-direction: alternate-reverse;
}

animation-fill-mode

アニメーションの開始前と終了後のスタイルを指定します。
指定できる値は以下の物があります。

animation-fill-mode: forwards; を指定

アニメーション終了時に、終了時の状態のままになります。

<div class="sample-box"></div>

@keyframes sample-animation {
  0% {
    background-color: aqua;
  }

  100% {
    width: 100%;
    background-color: aqua;
  }
}

.sample-box {
  height: 50px;
  width: 50px;
  background-color: blue;
}

.sample-box:hover {
  /* アニメーション設定 */
  animation-name: sample-animation;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: forwards;
}

※青四角にマウスホバー or タップしてください
（2秒後にアニメーション開始し、アニメーション終了後は100%の状態のままになる）

animation-fill-mode: backwards; を指定

アニメーション終了時に、開始前の状態に戻ります。

<div class="sample-box"></div>

@keyframes sample-animation {
  0% {
    background-color: aqua;
  }

  100% {
    width: 100%;
    background-color: aqua;
  }
}

.sample-box {
  height: 50px;
  width: 50px;
  background-color: blue;
}

.sample-box:hover {
  /* アニメーション設定 */
  animation-name: sample-animation;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: backwards;
}

※青四角にマウスホバー or タップしてください
（マウスホバー or タップ直後に0%の状態に変化。そして2秒後にアニメーション開始する。アニメーション終了後は元の状態に戻る）

animation-play-state

アニメーションの再生と停止をコントロールします。
指定できる値は以下の物があります。

animation-play-state: paused; を指定

アニメーションを停止させます。

<div class="sample-box"></div>

@keyframes sample-animation {
  100% {
    width: 100%;
  }
}

.sample-box {
  height: 50px;
  width: 50px;
  background-color: blue;

  /* アニメーション設定 */
  animation-name: sample-animation;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

.sample-box:hover {
  animation-play-state: paused;
}

※青四角にマウスホバー or タップしてください（アニメーションが止まります）

animation の使い方（書き方）

animation プロパティは、今まで説明してきた8つのプロパティのショートハンド（一括指定）です。

実際の記述方法は、以下のように各値を半角スペースで区切って指定します。

各プロパティは省略可能、記述の順番は任意

animation の各プロパティは、省略することも可能です。省略した場合はそれぞれの初期値が適用されます。

また、animation プロパティの記述の順番は特に決まりはありませんが、animation-duration と animation-delay に関しては記述順序に注意が必要です。
秒数を２つ並べた場合、1番目の値が animation-duration となり、2番目の値が animation-delay となります。
例えば、「animation: name 1s 5s;」と指定した場合は、animation-duration が「1s」、animation-delay が「5s」となります。

animation プロパティに複数アニメーションも指定可能

アニメーションが複数ある場合、カンマ区切りで複数指定することもできます。

<div class="sample-box"></div>

@keyframes sample-animation1 {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

@keyframes sample-animation2 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.sample-box {
  height: 50px;
  background-color: blue;

  /* アニメーション設定 */
  animation: sample-animation1 3s infinite, sample-animation2 3s infinite;
}

幅をアニメーションさせる「sample-animation1」と、透明度をアニメーションさせる「sample-animation2」の両方を設定しています。

まとめ

最後にまとめておきます。