動き：ホバーで拡大するカードとアニメーションの違い

完成イメージ

作成ファイル・保存場所

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

ファイル名	内容
hover-vs-animation.html	ホバー＆アニメーション比較用のHTMLファイル
hover-vs-animation.css	CSSアニメーションとトランジション用CSS

👉 HTMLとCSSは <link> タグで連携してください。

いろいろあるアニメーションプロパティの使いどころ

transform：要素を動かしたり回転させたり拡大縮小するためのプロパティです。
scale()：transform の中で、サイズを拡大・縮小するときに使います。（例：scale(1.2) は1.2倍）
transition：スタイルが変化するタイミングをなめらかに見せるためのプロパティです。急な切り替えをスムーズにします。
animation / @keyframes：あらかじめ決めた動きを自動で繰り返す仕組み。特定の流れを作るときに使います。

目的

transform: scale() と transition を使って、ホバー時に拡大する効果を作れるようにする
@keyframes を使って、ふわふわ上下に揺れるアニメーションを加えてみる
transition と animation の違いを体験を通じて理解する

チェックポイント

:hover によって transform の変化が適用できているか
transition によりなめらかな動きが出せているか
animation によって自動で繰り返す動きが作れているか
それぞれの使い分けを理解できているか（タイミング、用途）

HTMLとCSSの基本構造

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Practice 06</title>
    <link rel="stylesheet" href="hover-vs-animation.css">
</head>

<body>
    <main class="card-wrapper">
        <div class="card card--hover">
            <h2>ホバーで拡大</h2>
        </div>

        <div class="card card--float">
            <h2>ふわふわ動く</h2>
        </div>
    </main>
</body>

</html>

CSSの基本構成

下記のCSSは基本部分です。入力後は、下部にある「動きためのCSS」を追加します。

/* 全体のレイアウト調整 */
body {
    font-family: sans-serif;
    background: linear-gradient(135deg, #dbeafe, #fef9c3);
    margin: 0;
    padding: 2rem;
}

.card-wrapper {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.card {
    width: 200px;
    height: 150px;
    background-color: #ffffffcc;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: all 0.3s ease;
}

CSSで動きを比較してみよう

A. :hover + transition（ユーザーの操作に反応）

.card--hover {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card--hover:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

B. animation + @keyframes（自動で繰り返す動き）

.card--float {
  animation: float 3s ease-in-out infinite;
}
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

応用ポイント

ユーザーの操作に応じた動きは :hover + transition
自動的にループさせたい動きは animation + @keyframes
状況によって使い分けよう！

🔍 さらに調べてみよう！

animation-delay, animation-fill-mode, transition-delay など、動きのタイミング調整も重要です。