CSSだけでホームページのアニメーションを実装する方法

ホームページを開いた時に、画像やテキストがアニメーションするとかっこいいですよね。
以前はJavaScriptでアニメーションを実装することが多かったですが、CSSでもアニメーションを実装することが出来ます。
今回は簡単なアニメーションの例を元にして、CSSでアニメーションを実装する方法を解説します。

アニメーションのサンプルをご紹介
まずはアニメーションなしでコーディング
CSSアニメーションについて簡単に解説
- @keyframesでアニメーションの内容を指定する
- animationでアニメーションを動作させる
CSSでアニメーションを実装する
まとめ

アニメーションのサンプルをご紹介

今回は以下のアニメーションを作成します。

左右から背景がスライドして、その後に中央のテキストが表示されるというアニメーションです。

まずはアニメーションなしでコーディング

まずはアニメーションなしでHTMLとCSSをコーディングします。

HTMLは以下のようにコーディングしました。

<div class="animation-area">
  <div class="bg-blue"></div>
  <div class="bg-black"></div>
  <div class="square"></div>
  <div class="text-box">
    <p class="text-1">RYOB</p>
    <p class="text-2">Web design</p>
  </div>
</div>

.animation-areaはアニメーションする領域。
.bg-blueは青色の背景。
.bg-blackは黒色の背景。
.squareは白枠の正方形。
.text-boxは中央の白文字です。

CSSは以下のようにコーディングしました。

body {
  margin: 0;
}

.animation-area {
  position: relative;
  height: 100vh;
  width: 100vw;
}

.bg-blue,
.bg-black {
  position: absolute;
  top: 0;
  height: 100%;
  width: 50%;
}

.bg-blue {
  left: 0;
  background-color: #0062ff;
}

.bg-black {
  right: 0;
  background-color: #000;
}

.square {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 400px;
  width: 400px;
  border: 5px solid #fff;
  transform: translate(-50%, -50%);
}

.text-box {
  position: absolute;
  top: 50%;
  left: 50%;
  color: #fff;
  text-align: center;
  transform: translate(-50%, -50%);
}

.text-1 {
  margin: 0 0 .5rem;
  font-size: 100px;
  font-weight: bold;
}

.text-2 {
  margin: 0;
  font-size: 40px;
  font-weight: bold;
}

基本的に.animation-areaの子要素を絶対配置でレイアウトしています。
.animation-areaの高さは100vhを指定していますが、任意の値に変更してもOKです。

CSSアニメーションについて簡単に解説

アニメーションを実装する前にCSSアニメーションについて簡単に解説します。

CSSアニメーションは@keyframesでアニメーションの内容を指定し、animationで@keyframesで指定したアニメーションを動作させます。
文章だけでは伝わりにくいので、要素をフェードインで表示するアニメーションを例に解説します。

@keyframesでアニメーションの内容を指定する

まず以下のように@keyframesでフェードインのアニメーションを指定します。

@keyframes fadeIn {
  0% {opacity: 0;} // アニメーション開始時の状態
  100% {opacity: 1;} // アニメーション終了時の状態
}

fadeInの部分は任意の値でアニメーションの名前を指定します。
このアニメーション名は、アニメーションを動作させる際に必要になります。

0%でアニメーション開始時の要素の状態を指定します。
今回の例ではopacity: 0;で要素を透明にしています。

100%でアニメーション終了時の要素の状態を指定します。
今回の例ではopacity: 1;で要素を不透明にしています。

以上の指定で、アニメーション開始時は透明だった要素が、終了時には不透明になります。

animationでアニメーションを動作させる

アニメーションさせたい要素にanimationを指定します。
animationの指定方法は以下のようになります。

.fadein {
  animation: fadeIn 1s
}

fadeInは@keyframesで指定したアニメーション名です。
1sは1回のアニメーションの再生時間を指定します。
この例ではfadeInというアニメーションを1秒間で再生するということになります。

CSSでアニメーションを実装する

先ほどコーディングしたHTMLとCSSにアニメーションを実装していきます。

青色の背景のアニメーションを指定する

まずは青色の背景のアニメーションを指定します。
青色の背景のCSSは以下のようになります。

bg-blue {
  left: 0;
  background-color: #0062ff;
  animation: bg-blue 0.3s ease-in;
}

@keyframes bg-blue {
  0% {width: 0%;}
  100% {width: 50%;}
}

アニメーション開始時は横幅が0%で、終了時は親要素の50%になるというアニメーションです。
animationでease-inをしていますが、これはアニメーションの動かし方です。
ease-inはアニメーションがゆっくり始まり、終わりに近づくほど動きが速くなります。
他にもease、linear、ease-out、stepsなどがありますが、今回はそれらの説明は割愛します。

黒色の背景のアニメーションを指定

次は黒色の背景のアニメーションを指定します。
黒色の背景のCSSは以下のようになります。

.bg-black {
  right: 0;
  background-color: #000;
  animation: bg-black 0.3s ease-in 0.3s backwards;
}

@keyframes bg-black {
  0% {width: 0%;}
  100% {width: 50%;}
}

基本的には青色の背景のアニメーションと同じです。
ただし、ease-inの後に0.3sとbackwardsという指定を追加しています。

0.3sはアニメーション開始を0.3秒遅らせるための指定です。
青色の背景のアニメーションが0.3秒で再生されるので、その後に黒色の背景のアニメーションが始まるようにしています。

backwardsはアニメーションが始まるまで、@keyframesの0%の状態を維持します。
これを指定しておかないと、青色の背景がアニメーションしている間も黒色の背景がwidth: 0%;にならず表示されている状態になります。

白枠の正方形のアニメーションを指定する

次は白枠の正方形のアニメーションを指定します。
白枠の正方形のCSSは以下のようになります。

.square {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 400px;
  width: 400px;
  border: 5px solid #fff;
  transform: translate(-50%, -50%);
  animation: square 0.8s ease-in 0.6s backwards;
}

@keyframes square {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-360deg);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0deg);
  }
}

白枠の正方形には回転のアニメーションを追加しました。
アニメーション開始時はtransformのrotate(-360deg)で要素を回転させておき、終了時にはrotate(0deg)で元に戻します。

白文字のアニメーションを指定する

次は白文字のアニメーションを指定します。
白文字のCSSは以下のようになります。

.text-box {
  position: absolute;
  top: 50%;
  left: 50%;
  color: #fff;
  text-align: center;
  transform: translate(-50%, -50%);
  animation: text-box 1s ease-in 1.4s backwards;
}

@keyframes text-box {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

白文字は単純なフェードインのアニメーションです。