キーフレームアニメーションの基礎

このページの目的

CSSの@keyframesとanimationプロパティを使い、要素を「フェードイン」させたり、「フワフワと浮遊」させたりする、より高度なアニメーションの実装方法を学びます。
Webサイトにリッチな動きを加え、ユーザーの視線を引きつける表現が可能になります。

smart_display動作サンプル

実際に動作するサンプルです。ページを読み込むと、各要素がそれぞれ異なるアニメーションで表示されます。

Fade In
Slide In
Floating

このサンプルを実装するためのHTMLとCSSのコードは以下の通りです。

build実装方法

キーフレームアニメーションは、以下の2つの要素を組み合わせて実装します。

  1. @keyframes：アニメーションの各コマ（キーフレーム）でのスタイルを定義します。
  2. animationプロパティ：どの@keyframesを、どのくらいの時間をかけて、どのように再生するかを要素に指定します。

1. @keyframesでアニメーションを定義する

まず、アニメーションに名前を付けて、その動きを定義します。from (0%)からto (100%)までの間で、スタイルの変化を記述します。

/* フェードインするアニメーションの定義 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

2. animationプロパティで要素に適用する

次に、作成したアニメーションを特定の要素に適用します。

.my-element {
  /* どの
   * アニメーションを / 何秒かけて / どんな速度変化で / 何秒後に / 何回 / どんな向きで
   * 再生するかを指定する
   */
  animation: fadeIn 0.8s ease-out 0.2s 1 normal;
}

これは、以下のプロパティを一括で指定するショートハンドです。

animation-name
適用する@keyframesの名前（例: `fadeIn`）
animation-duration
アニメーションが完了するまでの時間（例: `0.8s`）
animation-timing-function
速度変化のカーブ（例: `ease-out` ゆっくり終わる）
animation-delay
アニメーションが始まるまでの遅延時間（例: `0.2s`）
animation-iteration-count
アニメーションを繰り返す回数（infiniteで無限ループ）
animation-direction
アニメーションの再生方向（alternateで往復再生）

warningよくある間違いと対策

アニメーションが一瞬で終わってしまう
animation-durationの指定が抜けているか、`0s`になっている可能性があります。必ず時間を指定しましょう。
ページを読み込んだ時、一瞬だけアニメーション前の状態が見えてしまう
animation-fill-mode: forwards;を指定すると、アニメーション終了後も最後のキーフレーム（100%の状態）のスタイルが維持されます。また、animation-fill-mode: backwards;は、animation-delayで開始が遅れる場合に、最初のキーフレーム（0%の状態）をアニメーション開始前から適用します。
arrow_back Tips集トップへ戻る