HPBUILD

「ボタンの色がふわっと変わる」「画像にゆっくりズームがかかる」など、なめらかな変化をCSSで簡単に実現したいと思ったことはありませんか？ そんなときに役立つのが CSSのtransition（トランジション）プロパティ です。この記事では、transitionの基本とよく使うパターンを初心者向けに解説します。 transitionとは？ transitionは、CSSプロパティの変化に「時間的な動き（アニメーション）」をつけるためのプロパティです。 マウスオーバーやクラスの変更などによって発生する変化を、なめらかに見せることができます。 基本構文 コピー transition: プロパティ名 時間 イージング 遅延; 例：transition: all 0.3s ease;（すべてのプロパティを0.3秒かけて変化） よく使うパターン ① ボタンの背景色をふわっと変化 コピー .btn { background: #ff9999; transition: background 0.3s ease; } .btn:hover { background: #ff6666; } ② 画像にズーム効果をつける コピー .image { transition: transform 0.5s ease; } .image:hover { transform: scale(1.1); } ③ 複数プロパティを同時に変化 コピー .box { transition: background 0.3s ease, color 0.5s linear; } .box:hover { background: #000; color: #fff; } 補足：よく使うイージング ease：自然なスピード（開始と終了がゆるやか） linear：一定のスピードで変化 ease-in：開始がゆっくり ease-out：終了がゆっくり ease-in-out：開始と終了がゆっくり おわりに transitionを活用すれば、サイトの印象をぐっと洗練されたものにできます。 最初はbackgroundやtransformから試して、徐々に組み合わせていくと感覚がつかめますよ。