CSSでアニメーションを作成する方法

ここでは、CSSでアニメーションを作成する方法について説明していきます。

@keyframes

まずは@keyframesを用いてアニメーションの動作を定義します。

構文

@keyframes アニメーション名 {
  *% {
    プロパティ: 値;
  }
  *% {
    プロパティ: 値;
  }
　・・・
}

使用例

@keyframes rgb {
  33% {
    background-color: #0f0;
  }
  66% {
    background-color: #00f;
  }
  100% {
    background-color: #f00;
  }
}

「animation」プロパティ

次に、アニメーションを作成したい要素に「animation」プロパティを記述します。

構文

セレクタ {
　animation: アニメーション名 アニメーション時間 繰り返し回数;
}

使用例

.main {
  height: 100%;
  background-color: #f00;
  animation: rgb 6s infinite;
}

まとめ

このように、「@keyframe」と「animation」プロパティを用いることで、アニメーションを作成することができます。