CSS アニメーション @keyframe

@keyframeは、要素の透明度を徐々に変化させて、フェードイン・フェードアウトさせる効果を作成します。

例えば以下のようなコードの場合

@keyframes menuFade {
  /* アニメーションの開始位置 (0%) */
  0% {
    opacity: 0; /* 要素は完全に透明 */
  }

  /* アニメーションの終了位置 (100%) */
  100% {
    opacity: 1; /* 要素は完全に不透明 */
  }
}

主なポイント

• @keyframes menuFade は、アニメーションの名前を定義します。
• 0% と 100% は、アニメーションの開始位置と終了位置を指定します。
• opacity プロパティは、要素の透明度をコントロールします。
• このアニメーションは、要素を徐々に透明度 0 から 1 に変化させ、フェードイン・フェードアウトさせる効果を作成します。

このアニメーションを使用するには、以下のように要素に適用する必要があります。

.menu {
  animation: menuFade 1s ease-in-out; /* アニメーション名を指定 */
}

上記のように設定すると、.menu クラスを持つ要素に対して、menuFade アニメーションが 1 秒かけて、イージング機能付きで実行されます。

animationに使われる主なオプション

• animation-duration: アニメーションの再生時間を変更できます。
• animation-delay: アニメーションの開始タイミングを遅らせることができます。
• animation-iteration-count: アニメーションの繰り返し回数を設定できます。
• animation-fill-mode: アニメーションの終了後の要素の状態を設定できます。
• animation-timing-function: アニメーションの速度変化を制御するタイミング関数を設定できます。

小中学生向けプログラミング教材「デジタネ」