CSSアニメーション
@keyframesとanimationプロパティの使い方

CSSアニメーションを使うと、JavaScriptなどの言語を使わずにウェブページ上でモーションやアニメーションを実現できます。

ここでは、CSSアニメーションのコードの書き方と使い方をわかりやすく解説します。

@keyframes

CSSアニメーションを実装するには、@keyframesという@ルールを使用します。

@ルールはCSSの挙動ルールを決めるもので、@keyframesを使うことでアニメーションの各進度における変化量を記述できます。

まずは@keyframesの骨組みです。

CSS

@keyframes 任意の名称 {

}

@keyframesの直後にはアニメーションの名称が入ります。その後ろに{}が続きます。

アニメーションを反映させたいセレクタのanimation-nameプロパティにこの名称を値として記述します。

次に{}の中に進度を記述します。

CSS

@keyframes 任意のキーワード {
  進度 {

  }
}

ここでの進度とは、アニメーションが始まってから終わるまでの間の特定のタイミングのことです。

0%、50%、100%というようにパーセントで記述します。from（0%）、to（100%）を記述することもできます。

そうしたら、変化させたいプロパティと値を記述していきます。

CSS

@keyframes 任意のキーワード {
  進度 {
    プロパティ: 値;
  }
}

これが基本的な骨組みとなります。次に例をあげてみます。

CSSアニメーション例：フェードイン

一例として、フェードインアニメーションを作ってみます。

CSS

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

opacityは不透明度です。0なら完全に透明、1なら完全に不透明となります。

つまり、アニメーションの始まり（0%）は完全に透明で、終わり（100%）は完全に不透明となります。

次に、このアニメーションをfadeInというクラス名に付与してみます。

CSS

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.fadeIn {
  animation-name: fadeIn;
}

これでアニメーションを特定の要素に反映させることができました。

しかし、これではまだアニメーションは再生されません。

なぜなら、アニメーションの時間が未設定だからです。

アニメーションの時間を設定する

次にアニメーションの時間を指定します。

その前に、わかりやすくするため、アニメーションをかける要素を色付きの正方形にしておきます。

CSS

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.fadeIn {
  animation-name: fadeIn;
  width: 200px;
  height: 200px;
  background-color: black;
}

アニメーションの時間を指定するには、animation-durationプロパティを使います。値には秒（s）またはミリ秒（ms）を取ります。

以下では3秒で設定してみます。

CSS

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.fadeIn {
  animation-name: fadeIn;
  animation-duration: 3s;
  width: 200px;
  height: 200px;
  background-color: black;
}

DEMO

これでフェードインアニメーションが完成しました。

アニメーションの再生回数を設定する

アニメーションの再生回数を指定するには、animation-iteration-countプロパティを指定します。

値には数値またはinfinite（無限）を取れます。

CSS

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.fadeIn {
  animation-name: fadeIn;
  animation-duration: 3s;
  animation-iteration-count: 3;
  width: 200px;
  height: 200px;
  background-color: black;
}

DEMO

CSS

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.fadeIn {
  animation-name: fadeIn;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  width: 200px;
  height: 200px;
  background-color: black;
}

DEMO