CSSアニメーションでカードをふわっと表示させる方法

Webページを開いたとき、カードがいきなり現れるよりも、少し透明な状態から自然に浮かび上がるほうが、画面全体に落ち着いた印象を与えられます。CSSアニメーションを使えば、JavaScriptに頼らず、カードの表示タイミングや移動量を細かく調整できます。

ポートフォリオや記事一覧、スマートフォン向けのアプリ紹介画面では、カード型のUIがよく使われます。今回はopacityとtransformを組み合わせ、軽やかなフェードインを実装する方法を、HTMLの構造から表示速度への配慮まで順番に紹介します。

カードの表示に使う基本プロパティ

ふわっとした出現を作るときは、透明度を変えるopacityと、位置を少し動かすtransformが中心になります。最初は透明にして下方向へずらし、アニメーションの終了時に元の位置と不透明な状態へ戻します。

opacityだけでもフェードインはできますが、移動を加えることでカードが画面内へ滑り込むように見えます。移動距離は大きすぎると派手になるため、10〜24px程度から試すと自然なバランスを見つけやすくなります。

HTMLをシンプルに組み立てる

カードを複数並べる場合は、一覧全体を囲むコンテナと、それぞれのカードを分けておくと管理しやすくなります。画像、タイトル、説明文、リンクなどをひとつの要素にまとめれば、スタイルの再利用もしやすくなります。

<div class="card-list">
  <article class="card">
    <img src="image.jpg" alt="サービスのイメージ">
    <h2>デザイン制作</h2>
    <p>使いやすさを意識したウェブサイトを制作します。</p>
  </article>
</div>

個人サイトの構成や制作物の見せ方を考えるときは、制作記録を読むのように、情報をカード単位で整理したページも参考になります。コンテンツの量に合わせて、1列表示と複数列表示を切り替える設計も有効です。

keyframesでフェードインを作る

アニメーションの動きを定義するには、@keyframesを使います。0%の時点では透明かつ少し下に配置し、100%で通常の位置へ戻します。ease-outを指定すると、動き始めは軽快で、終わりに向かってゆっくり停止します。

.card {
  opacity: 0;
  transform: translateY(20px);
  animation: card-fade-in 0.7s ease-out forwards;
}

@keyframes card-fade-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

forwardsは、アニメーション終了後も最後の状態を保つための指定です。これがないと、再生が終わったカードが初期状態へ戻る場合があります。表示を一度だけ行いたいときは、animation-iteration-countを追加せず、初期値の1回再生を利用できます。

カードごとに表示をずらす

すべてのカードが同時に現れると、まとまりのある動きになります。カードを順番に表示したい場合は、animation-delayを使って開始時間を少しずつ遅らせます。HTMLにクラスを追加する方法なら、JavaScriptなしで実装できます。

.card:nth-child(1) {
  animation-delay: 0.1s;
}

.card:nth-child(2) {
  animation-delay: 0.2s;
}

.card:nth-child(3) {
  animation-delay: 0.3s;
}

遅延時間が大きすぎると、最後のカードがいつまでも表示されないように感じられます。1枚ごとの差は0.1〜0.15秒程度に抑えると、連続性を保ちながら視線を誘導できます。JavaScriptの非同期処理を学ぶなら、非同期処理の記事と組み合わせて、スクロール位置に応じた表示にも発展させられます。

ホバー演出と役割を分ける

ページを開いたときのフェードインと、マウスを重ねたときのホバー演出は、別の仕組みとして設計すると調整しやすくなります。表示時はanimation、操作時はtransitionを使うと、それぞれの役割が明確になります。

.card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}

ただし、表示用のtransformとホバー用のtransformが同じ要素で競合すると、動きが意図せず上書きされることがあります。必要に応じて内側に画像用の要素を置き、カード本体と画像でアニメーションを分担すると、表現の自由度が上がります。

アクセシビリティと表示速度に配慮する

アニメーションを好まない利用者に配慮するには、prefers-reduced-motionを確認します。OSやブラウザで動きを減らす設定が有効な場合は、カードをすぐ表示するようにすると、読みやすさと操作性を保てます。

@media (prefers-reduced-motion: reduce) {
  .card {
    animation: none;
    opacity: 1;
    transform: none;
    transition: none;
  }
}

また、box-shadowを強くしすぎたり、大きな画像を同時に動かしたりすると、スマートフォンで負荷が高くなることがあります。iPhoneの利用感を考える際は、iPhone購入記録のような実機に関する記録も参考にしながら、低速な通信環境や小さな画面でも快適に見える演出へ調整しましょう。

まずはopacityとtranslateYだけで基本の表示を作り、遅延、ホバー、スクロール連動の順に機能を加えていくと、原因を追いやすくなります。自分のポートフォリオや制作中の画面にコードを組み込み、カードの動きがコンテンツの魅力を引き立てているか確認してみてください。