【解説13】ファーストビューのアニメーション設定 | SkillhubAI（スキルハブエーアイ）

フェードインのベースを作る

CSSアニメーションを使って、フェードイン表示を作ります。

まず、シンプルにキーフレームアニメーションを作ってみましょう。

/* ------------ */
/* アニメーション*/
/* ------------ */
@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }

.top_imgbox,
.top_stepbox li,
.top_stepbox .btn {
  opacity: 0;
  animation-name: fadeIn;
  animation-duration: 800ms;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}

ひとまず、アニメーションを適用する要素をセレクタにしました。

CSSが効いているか、ブラウザで見てみましょう。ブラウザで表示もしくはリロードすると、フェードインっぽい表示になりました。

file

1.表示する順番を決める（SP）

現時点では、全て同じタイミングで表示されてしまっているので、要望に沿った順番で表示されるように設定しましょう。

「animation-delay」を使って、実行タイミングをずらします。

/* アニメーションの順番 */
.top_imgbox{
  animation-delay: unset;
}

.top_stepbox li:nth-child(1) {
  animation-delay: 200ms;
}

.top_stepbox li:nth-child(2) {
  animation-delay: 400ms;
}

.top_stepbox li:nth-child(3) {
  animation-delay: 600ms;
}

.top_stepbox li:nth-child(4) {
  animation-delay: 800ms;
}

.top_stepbox .btn {
  animation-delay: 1000ms;
}

file

2.表示する順番を変える(TB幅～)

PC幅のときはliの画像が先、QbaseWEBイメージ画像はそのあとに表示させます。レイアウトが横並びに変わるタブレット幅@media (min-width: 768px){}から、アニメーションの実行順序を変更しましょう。

/* @media (min-width: 768px){}内 */

  /* アニメーションの順番 */
  .top_imgbox{
    animation-delay: 800ms;
  }

  .top_stepbox li:nth-child(1) {
    animation-delay: unset;
  }

  .top_stepbox li:nth-child(2) {
    animation-delay: 200ms;
  }

  .top_stepbox li:nth-child(3) {
    animation-delay: 400ms;
  }

  .top_stepbox li:nth-child(4) {
    animation-delay: 600ms;
  }

これで簡単なフェードイン表示は完了です。

file

ちょっとアレンジ

上の形でも、クライアントの要望を満たしていますので完成ではあります。ですが、単調すぎで少し退屈な印象もありますよね。もう少し変化を付けてみましょう。

イメージは、 QbaseWEBイメージ画像が右横からスライドイン今すぐテストを受けるボタンが下からスライドインです。

file

クライアントはもしかすると単調な方が好きかもしれません。 cssをコピーして、別バージョンとして作ると確実です。

※デモファイルではdemo-style2.cssとしています。

右から左（本来の位置）下から上（本来の位置）に移動するキーフレームを作ります。

@keyframes fadeIn-right {
  0% {
    transform: translateX(30px);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes fadeIn-bottm {
  0% {
    transform: translateY(30px);
  }

  100% {
    transform: translateX(0);
  }
}

どのキーフレームを使うかを設定します。

.top_imgbox,
.top_stepbox li,
.top_stepbox .btn {
  opacity: 0;
  animation-duration: 800ms;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}

.top_imgbox{
  animation-name: fadeIn,fadeIn-right;
}

.top_stepbox li{
  animation-name: fadeIn;
}

.top_stepbox .btn {
  animation-name: fadeIn, fadeIn-bottm;
}