CSS @keyframes（キーフレーム）の使い方を徹底解説！アニメーション作成の基本と実例

CSSを使えば、アニメーションを驚くほど手軽に実装できます。しかも、サードパーティ製のフレームワークやプラグインは一切不要。標準のCSSだけで完結するのが大きな魅力です。

その中核となるのが、@keyframesというCSSルールです。この記事では、@keyframesの基本構文から実際のアニメーション作成例まで、わかりやすく解説していきます。

@keyframesの基本構文

@keyframesは、CSSの「アットルール（at-rule）」の一種です。アットルールとは、CSSがどのように振る舞うべきかを指示するための記述で、ほかにも@viewportや@supportsなど、さまざまな種類があります。

@keyframesルールは、次のような構文で定義します。

@keyframes <name> {
    from {
    /* 開始時のスタイルをここに記述 */
    }

    to {
    /* 終了時のスタイルをここに記述 */
    }
}

from / to のキーワードの代わりにパーセンテージを指定すれば、より細かくアニメーションの過程をコントロールできます。

@keyframes <name> {
  0% { }
  50% { }
  100% { }
}

ポイント： 作成したキーフレームを実際に使用するには、animation-nameプロパティの値として指定する必要があります。あわせてanimation-durationプロパティで再生時間を指定すると、アニメーションが完成します。

実例①：マジックボールの出現・消失アニメーション

それでは早速、「マジックボール」が出現したり消えたりするアニメーションを作ってみましょう。途中で迷ったときは、付属のCodepenを参照してください。

まずはアニメーションを定義します。ここでは「magic-ball」という名前を付けます。

@keyframes magic-ball {
  from {
    background-color: limegreen;
  }
  to {
    background-color: blueviolet;
  }
}

このコードでは、背景色をライムグリーン（limegreen）からブルーバイオレット（blueviolet）へと変化させています。このアニメーションは任意の要素に適用できますが、今回は円形の要素に使ってみましょう。

.circle {
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  animation-name: magic-ball;
  animation-duration: 4s;
}

忘れないでください： キーフレームアニメーションを動作させるには、animation-nameプロパティにアニメーション名を指定し、animation-durationで秒単位の再生時間を設定する必要があります。

これで、ボールがふわっと出現しては消えるアニメーションの完成です！💥

実例②：スライドインアニメーション

続いて、もうひとつ別のアニメーションを作成します。今度は正方形の要素を動かすエフェクトです。アニメーション名は「moveIn」とし、こちらではパーセンテージを使って定義します。

@keyframes moveIn {
  0% {
    opacity: 0;
    transform: translateY(3rem);
  }
  100% {
    opacity: 1;
    transform: translate(0);
  }
}

opacityは要素の透明度を表すプロパティです。この新しく作成したアニメーションを、正方形に適用してみましょう。

.square {
  width: 10rem;
  height: 10rem;
  background-color: greenyellow;
  animation-name: moveIn;
  animation-duration: 4s;
}

わずかなコード量で、洗ード量で、洗練されたフェードイン＆スライドイン効果を実現できたことがわかりますね！

まとめ

アニメーションについてさらに学びたい方は、MDN Web DocsなどのCSSアニメーション公式ドキュメントを読んでみてください。なお、本記事で触れたのはanimation-durationによる調整方法だけですが、animation-delay（開始までの遅延）やanimation-timing-function（速度カーブ）、animation-iteration-count（繰り返し回数）など、ほかにも便利なサブプロパティが多数あります。

最後にひとつ注意点として、すべてのCSSプロパティがアニメーション可能なわけではありません。実装前に、アニメーション対応プロパティの一覧を確認しておくと安心です。