動き：フェードインするアニメーションを作ろう

完成イメージ

各ブロックが下から一斉に上に上がってくるアニメーションが動きます。CSSのみで作成します

ページ読み込み時に、2つのカードが 下からふんわりフェードイン
各要素は .fadein を持つことでアニメーション対象になる

📁 作成ファイル・保存場所

css-practice フォルダを作成し、以下のファイルを用意してください。

ファイル名	内容
fadein-animation.html	アニメーション練習用のHTMLファイル
fadein-animation.css	CSSアニメーション用のスタイルシートファイル

HTMLはコピーして使いましょう

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <title>CSS Practice 02 - フェードイン</title>
  <link rel="stylesheet" href="fadein-animation.css">
</head>

<body>

  <main class="fadein-list">
    <section class="fadein-card fadein">
      <h2 class="fadein-card__title">HTMLとは？</h2>
      <p class="fadein-card__text">構造を定義するマークアップ言語です。</p>
    </section>

    <section class="fadein-card fadein">
      <h2 class="fadein-card__title">CSSとは？</h2>
      <p class="fadein-card__text">デザインやレイアウトを整えるスタイルシートです。</p>
    </section>

    <section class="fadein-card fadein">
      <h2 class="fadein-card__title">JavaScriptとは？</h2>
      <p class="fadein-card__text">Webページに動きを加えるプログラミング言語です。</p>
    </section>

    <section class="fadein-card fadein">
      <h2 class="fadein-card__title">PHPとは？</h2>
      <p class="fadein-card__text">サーバー側で処理するWeb向けスクリプト言語です。</p>
    </section>
  </main>

</body>

</html>

HTMLファイルとCSSファイルは <link> タグで連携させましょう。

HTMLの内容はこのページ下部にある模写用コードを入力して作成します。
指定されたクラス構造を再現し、CSSは自分で記述してフェードイン演出を加えましょう。

目的

CSSアニメーションの基本である @keyframes と animation を理解する
opacity と transform を使って、自然なフェードイン効果を作る
アニメーションのタイミング（duration, delay, easing）を調整できるようになる

チェックポイント

@keyframes を使ってアニメーションを定義できているか
opacity や transform: translateY を使ってフェードイン風にできているか
.fadein クラスを使って対象要素にアニメーションが適用されているか
アニメーションの秒数や遅延が適切に指定できているか

トレーニングスタート！

次は css-practice02.css を作成し、フェードインアニメーションを自分で書いてみましょう。以下の手順に沿ってCSSを書いていくと、アニメーションが完成します。

CSSの内容（ヒント）

アニメーションさせたい要素にクラスを付ける

.fadein {
  opacity: 0;                  /* 最初は見えない状態に */
  transform: translateY(40px); /* 少し下にずらす */
  animation: fade 1s ease forwards;
}

animation は @keyframes で指定した「名前」「時間」「イージング」「終点キープ（animation-fill-mode）」をまとめて指定しています。

補足

animation-fill-mode: forwards; は、アニメーション後の状態を保つ指定です。 forwardsは、他にも以下の指定があります

指定	内容
`none`	初期値。アニメーション前・後の状態は反映されない
`forwards`	アニメーション後の状態を保つ（よく使う）
`backwards`	アニメーション前の状態をすぐ反映（遅延がある場合に便利）
`both`	`before` + `after` を両方適用

たとえば「遅れて表示させたい要素」に backwards を使うと、開始前にすでにスタイルが適用されるため、ちらつきを防ぐことができます。

@keyframes を定義して、アニメーションの動き方を作る

@keyframes fade {
  to {
    opacity: 1;                  /* 完全に表示される */
    transform: translateY(0);    /* 元の位置に戻る */
  }
}

to は「終了状態」を表します（from { … } to { … } でもOK）

.fadein を持つすべての要素にこのアニメーションが自動で適用されます。

応用ポイント

animation-delay を追加して、順番に表示される演出を試してみよう
hover 時や :focus 時にアニメーションさせる工夫もOK
今後のスクロールアニメーション（Intersection Observer）に備えて、基本形を押さえておこう

解答例（CSS）

@keyframes が使えるようになると便利です！

/* 全体の背景と基本設定 */
body {
    margin: 0;
    font-family: sans-serif;
    background-color: #f7f7f7;
    padding: 2rem;
}

/* 親リスト */
.fadein-list {
    max-width: 960px;
    margin: 0 auto;
    display: grid;
    gap: 2rem;
}

/* カード */
.fadein-card {
    background-color: #ffffff;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* アニメーションの初期状態 */
.fadein {
    opacity: 0;
    transform: translateY(40px);
    animation: fade 1s ease-out forwards;
}

/* アニメーション定義 */
@keyframes fade {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* --- 応用ヒント：animation-delay を使って順番に表示させる場合 --- */
/* 
.fadein:nth-child(1) {
    animation-delay: 0s;
}

.fadein:nth-child(2) {
    animation-delay: 0.3s;
}

.fadein:nth-child(3) {
    animation-delay: 0.6s;
}

.fadein:nth-child(4) {
    animation-delay: 0.9s;
} */