Day 15 です。
今日から Phase 3: 動きとインタラクションの週 に入ります。
これまでの 2 週間で作ったデザインは、まだ「静止画」です。
今日からは、そこに「時間」の概念を取り入れ、命を吹き込みます。
最初のステップは transition（トランジション／遷移）。
「A の状態から B の状態へ、時間をかけて滑らかに変化させる」技術です。これがあるだけで、Web サイトの使い心地（UX）は大きく向上します。
はじめに：0 か 1 か、ではなく「余韻」を作る
CSS でホバー効果（:hover）をつけた時、初期状態では色が「パッ」と一瞬で切り替わりますよね？
これは機械的で、少し安っぽい印象を与えることがあります。
transition を使うと、色が「じわっ」と変わったり、ボタンが「ふわり」と浮き上がったりします。
この 「変化の過程」を補間する のが今日のテーマです。
🎯 本日の目標
-
書き方の基本：
transitionプロパティの省略形（プロパティ、時間、イージング）をマスターする。 -
置く場所のルール：
:hoverの中ではなく、元のクラス に書く理由を理解する。 -
イージング（緩急）：
ease、linear、ease-in-outの違いを知り、心地よい動きを作る。
📝 ミッション内容
以下の 2 つのインタラクティブな要素を作ってください。
-
Mission 1: 「Smooth Button」
- ホバーすると、背景色が変わり、同時にサイズが少し大きくなるボタン。
- 変化にかかる時間は「0.3 秒」。
-
Mission 2: 「Elastic Card」
- ホバーすると、上に浮き上がりながら影が濃くなるカード。
- 「行き（ホバー時）」と「帰り（マウスを離した時）」で変化のスピードを変えてみる（応用）。
💻 実装サンプル
正解例
See the Pen CSSマスターへの道「Transition」 by サカツ (@saka2jp) on CodePen.
🧠 解説と重要ポイント
1. 書き方の解剖図
/* ショートハンド（省略形） */
transition: <プロパティ> <時間> <イージング> <遅延(省略可) >;
/* 例 */
transition: background-color 0.5s ease-in-out;
-
プロパティ:
allにすると全部まとめて変化します。個別にcolorやtransformと書くとパフォーマンスが良いです。 -
時間:
0.3s(0.3 秒) や300ms(300 ミリ秒) と書きます。Web の UI では 0.2s 〜 0.4s が心地よいとされています。 -
イージング (Easing): 動きの「加減速」です。
-
linear: 一定速度（機械的な動き）。 -
ease: 開始と終了が滑らか（デフォルト）。 -
ease-out: 素早く始まって、ゆっくり止まる（ふわりと停まる感じ）。
-
2. なぜ :hover に書かないのか
.btn:hover { transition: ... } と書いてしまうと、「マウスを乗せた時」しかアニメーションしません。
マウスを離した瞬間、アニメーションなしで「バチッ」と元の位置に戻ってしまいます。
「元のクラス（.btn）」 に書くことで、行きも帰りもスムーズになります。
💡 応用：プロパティごとに時間をずらす
transition-delay を使うと、複数の変化に時間差をつけることができます。
例えば、「まず背景が変わってから、そのあと文字色が変わり、最後に枠線が広がる」といった凝った演出です。
.complex-box {
background: white;
color: black;
border: 2px solid transparent;
/*
1. background は すぐ(0s) 始まる
2. color は 0.2s 待ってから始まる
*/
transition: background-color 0.3s ease 0s, color 0.3s ease 0.2s;
}
.complex-box:hover {
background: black;
color: white;
}
これを使うと、洗練された印象を与えられます。
おわりに
transition: all 0.3s ease;
この 1 行を覚えておいてください。
ボタン、リンク、カードなど、クリックできる要素にはこれを入れておくだけで、サイトのクオリティが向上します。
さて、transition は「A 地点から B 地点へ」の単純な往復でした。
次回は、 「Animation (キーフレーム)」 です。
「A → B → C → A」のように、もっと複雑で自由な動きを作り出します。CSS だけでローディングアニメーションを作ってみましょう。