2022/4/7 （更新日: 2022/4/14）

CSSで作るフェードインアニメーション

CSS

CSSアニメーションでフェードインってどうやるの？

そんな疑問にお答えします。

今回はCSSのフェードインアニメーションのやり方を紹介します。
使うのはanimationとkeyframesです。
animationとkeyframesの使い方が今いちわからない方はまずこちらの記事をお読みください。

【徹底解説】animationとkeyframesの使い方をマスターしよう！【CSS】

CSSアニメーションでのフェードインはjQueryを用いる場合に比べてコードがシンプルで手軽に実装できます。

ただしCSSアニメーションは画面を開いたタイミングで動き出します。

スクロールして動かすなどのきっかけが必要な場合はjQueryを使って実装しましょう。

1 CSSで作るフェードインアニメーション
- 1.1 コード解説
2 上から下へフェードイン
- 2.1 コード解説
3 ズームイン

CSSで作るフェードインアニメーション

See the Pen
CSS フェードイン by toshi (@toshi78)
on CodePen.

右下の「Return」をクリックするとアニメーションを確認できます。

コード解説

<div class="container">
  <div class="background"></div>
</div>

.background {
  width: 100%;
  height: 100vh;
  background: url(画像パス) no-repeat center / cover;
}

.container {
  animation: fadein 5s ease-out forwards;
}

@keyframes fadein {
  0% {
     opacity: 0
  }
  100% {
     opacity: 1
  }
}

アニメーションの設定は

animation: fadein 5s ease-out forwards;

としています。

これはショートハンドで書いていて、ばらして書くと

animation-name: fadein; /* キーフレームの名前 */
animation-duration: 5s; /* かかる時間 */
animation-timing-function: ease-out; /* 速度 */
animation-fill-mode: forwards; /* アニメーション前後のプロパティの状態 */

となります。

つまり5秒かけて@keyframes内の指定を実行させています。

その指定とは「opacity」を0→1にすることです。

書き方さえわかればそれほど難しくはないと思います。

上から下へフェードイン

上の例はフェードインのみのアニメーションでした。

今度は上からスライドしてくるフェードインを作ります。

See the Pen
CSS上から下へフェードイン by toshi (@toshi78)
on CodePen.

コード解説

.background {
  width: 100%;
  height: 100vh;
  background: url(画像パス) no-repeat center / cover;
}

.container {
  animation: fadein-top 3s ease-out forwards;
}

@keyframes fadein-top {
  0% {
    opacity: 0;
    transform: translateY(-100px); /* 開始時はマイナス指定 */
  }
  100% {
    opacity: 1;
    transform: translateY(0); /* 終了時の位置をデフォルトに */
  }
}

上からスライドさせるには「transform: translateY();」を使います。

アニメーション開始時の位置をマイナスで指定し、終了時の位置を「transform: translateY(0);」とすることで上から下へのフェードインを作ることができます。

ズームイン

最後にズームインを作ります。

See the Pen
CSSズームイン by toshi (@toshi78)
on CodePen.

コード解説

.background {
  width: 100%;
  height: 100vh;
  background: url(画像パス) no-repeat center / cover;
}

.container {
  animation: zoomin 3s ease-out forwards;
}

@keyframes zoomin {
  0% {
    opacity: 0;
    transform: scale(0.7); /* 開始時は縮小サイズ */
  }
  100% {
    opacity: 1;
    transform: scale(1); /*終了時はデフォルトサイズに*/
  }
}

ズームインさせるには「transform: scale();」を使います。

開始時は縮小サイズ、終了時はデフォルトサイズにすることでズームインが出来上がります。

以上となります。