CSSキーフレームアニメーション（Keyframe Animations）の使い方

Posted on by

CSSキーフレームアニメーションは、要素に対して複数のステップを定義し、アニメーションを作成するための強力なテクニックです。
キーフレームを使用することで、要素の動きやプロパティの変化を細かく制御できます。

基本的なキーフレームアニメーションの作成

キーフレームアニメーションを作成するには、@keyframes ルールを使用します。
以下は、要素の位置をアニメーションさせる例です。

/* キーフレームアニメーションの定義 */
@keyframes slide {
  0% { left: 0; }
  100% { left: 100px; }
}

/* 要素にアニメーションを適用 */
.element {
  animation: slide 2s ease-in-out infinite;
}

上記の例では、@keyframes ルールで slide という名前のアニメーションを定義しています。
0% から 100% までのステップで、要素の left プロパティを変化させています。
アニメーションは 2s かけて実行され、イージング関数は ease-in-out です。

アニメーションの適用と制御

アニメーションを要素に適用するには、animation プロパティを使用します。
また、アニメーションを制御するためのオプションも指定できます。

.hoge {
  animation-name: slide;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

アニメーションの他のオプションには、animation-delay（アニメーションの遅延時間）や animation-direction（アニメーションの進行方向）などがあります。

複数のプロパティをアニメーション

キーフレームアニメーションを使用して複数のプロパティを同時にアニメーションさせることもできます。

@keyframes scaleAndRotate {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.5);
    opacity: 0.5;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

アニメーションの一時停止と再生

アニメーションを一時停止させたり再生させたりするには、animation-play-state プロパティを使用します。

.hoge:hover {
  animation-play-state: paused;
}

まとめ

CSSキーフレームアニメーションは、要素の動きやスタイルの変化を制御するための効果的な手段です。複雑なアニメーションを作成する際に、キーフレームを活用して表現力豊かなウェブアニメーションを実現してみましょう。