CSS アニメーションの達人になる！ @keyframes をマスターして滑らかな動きを表現しよう

CSSの@keyframes at-ruleは、アニメーションの動きを定義するために使用されます。アニメーションの開始と終了状態、およびその間の経過点を指定することで、滑らかな動きのあるアニメーションを作成することができます。

基本構文

@keyframes animation-name {
  from {
    /* 開始状態のスタイル */
  }
  
  to {
    /* 終了状態のスタイル */
  }
  
  /* 中間地点のスタイル (オプション) */
  50% {
    /* ... */
  }
}

例：回転アニメーション

次の例では、要素を360度回転させるアニメーションを定義します。

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  
  to {
    transform: rotate(360deg);
  }
}

このアニメーションを要素に適用するには、以下のスタイルを要素に追加します。

animation-name: rotate;
animation-duration: 2s;

アニメーションの繰り返し回数などは、animation-iteration-count や animation-direction などのプロパティで設定できます。
アニメーションの速度は、animation-duration プロパティで設定できます。
中間地点のキーフレームは、アニメーションの経過点を定義します。キーフレームのタイミングは、0% から 100% の範囲でパーセンテージで指定します。
to キーフレームは、アニメーションの終了状態を定義します。
from キーフレームは、アニメーションの開始状態を定義します。
各キーフレームには、アニメーションの特定の時点における要素のスタイルを定義する一連のCSSプロパティが含まれます。
@keyframes ルールには、アニメーションの名前を指定する必要があります。この名前は、アニメーションを要素に適用する際に使用されます。

アニメーションは、JavaScriptを使用して制御することもできます。
複数のアニメーションを要素に適用することができます。
@keyframes ルールは、グローバルスコープを持つため、ページ内のすべての要素で使用できます。

パフォーマンスを考慮して、アニメーションを効率的に使用するようにしましょう。
@keyframes は、CSS3で導入された機能です。古いブラウザではサポートされていない場合があります。

フェードインアニメーション

このアニメーションは、要素を徐々に表示します。

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  
  to {
    opacity: 1;
  }
}

.element {
  animation-name: fadeIn;
  animation-duration: 2s;
}

回転アニメーション

このアニメーションは、要素を回転します。

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  
  to {
    transform: rotate(360deg);
  }
}

.element {
  animation-name: rotate;
  animation-duration: 2s;
}

スケールアニメーション

このアニメーションは、要素を拡大縮小します。

@keyframes scale {
  from {
    transform: scale(1, 1);
  }
  
  50% {
    transform: scale(1.5, 1.5);
  }
  
  to {
    transform: scale(1, 1);
  }
}

.element {
  animation-name: scale;
  animation-duration: 2s;
}

パルスアニメーション

このアニメーションは、要素を大きくしてから小さくします。

@keyframes pulse {
  from {
    transform: scale(1, 1);
  }
  
  50% {
    transform: scale(1.2, 1.2);
  }
  
  to {
    transform: scale(1, 1);
  }
}

.element {
  animation-name: pulse;
  animation-duration: 2s;
}

移動アニメーション

このアニメーションは、要素を横方向に移動します。

@keyframes move {
  from {
    transform: translateX(0);
  }
  
  to {
    transform: translateX(200px);
  }
}

.element {
  animation-name: move;
  animation-duration: 2s;
}

カラーチェンジアニメーション

このアニメーションは、要素の色を青から緑、そして赤に変更します。

@keyframes colorChange {
  from {
    background-color: blue;
  }
  
  50% {
    background-color: green;
  }
  
  to {
    background-color: red;
  }
}

.element {
  animation-name: colorChange;
  animation-duration: 2s;
}

これらの例はほんの一例です。@keyframes を使用して、様々な種類のアニメーションを作成することができます。創造性を発揮して、あなただけのユニークなアニメーションを作ってみてください。

複数のアニメーションを組み合わせて、より複雑なアニメーションを作成することができます。
アニメーションの再生方向を調整するには、animation-direction プロパティの値を変更します。
アニメーションの繰り返し回数を調整するには、animation-iteration-count プロパティの値を変更します。
アニメーションの速度を調整するには、animation-duration プロパティの値を変更します。

CSS transition プロパティ

transition プロパティは、要素の状態が変化した際に滑らかなアニメーションを適用することができます。 @keyframes ほど複雑なアニメーションには対応できませんが、シンプルなフェードイン、フェードアウト、移動などのアニメーションであれば、簡単に記述することができます。

例：要素を1秒かけて不透明度を0から1に変更するアニメーション

.element {
  transition: opacity 1s;
  opacity: 0; /* 初期状態を透明にする */
}

.element:hover {
  opacity: 1; /* マウスホバー時に不透明度を1にする */
}

SVGアニメーション

SVGアニメーションは、SVGファイルを**<animate>タグを使用してアニメーションさせる方法です。複雑な動きやモーフィングなど、@keyframes` では表現が難しいアニメーションも実現できます。

例：円を回転させるSVGアニメーション

<svg width="100" height="100" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="red">
    <animateTransform attributeName="transform"
                     type="rotate"
                     from="0 50 50"
                     to="360 50 50"
                     dur="2s"
                     repeatCount="indefinite" />
  </circle>
</svg>

JavaScriptライブラリ

GreenSockやAnime.jsなどのJavaScriptライブラリを使用すると、より高度なアニメーションを作成することができます。これらのライブラリは、@keyframes では実現できないような複雑な動きやインタラクティブなアニメーションを可能にします。

例：GreenSockを使用して要素をバウンスさせるアニメーション

const element = document.querySelector('.element');

const bounceAnimation = new TimelineLite()
  .to(element, 1, { y: 100, ease: Elastic.easeInOut })
  .to(element, 1, { y: 0, ease: Elastic.easeInOut });

bounceAnimation.play();

それぞれの方法の利点と欠点

方法	利点	欠点
`transition`	記述が簡単	複雑なアニメーションには不向き
SVGアニメーション	複雑な動きやモーフィングが可能	コードが煩雑になる場合がある
JavaScriptライブラリ	高度なアニメーションやインタラクションが可能	ライブラリの習得が必要

状況に応じて、最適な方法を選択することが重要です。シンプルなアニメーションであれば transition を、複雑なアニメーションであれば SVGアニメーションやJavaScriptライブラリを使用するのがおすすめです。