Frontend Academy · レッスン

トランジション：プロパティ・時間・タイミング

transition を追加して CSS プロパティの変更を滑らかにアニメーション化し、適切な時間を設定し、ease-in-out などのイージング関数を選びます。

レッスン 2/413 ステップ

「トランジション：プロパティ・時間・タイミング」はCoddyKit上の無料Frontend Academyレッスンです。これはレッスン2/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。

CSS トランジションとは

CSS トランジションは、プロパティが変化したとき（ホバー、フォーカス、クラスの切り替えなど）に、ある値から別の値へアニメーションさせます。宣言的な仕組みなので、どのプロパティをどのようにトランジションするかを CSS に指定すれば、あとはブラウザーが処理します。

基本構文

transition: property duration timing-function delay。複数のトランジションはカンマで区切って指定できます。

.btn {
  background: #6366f1;
  transition: background-color 0.2s ease;
}
.btn:hover {
  background: #4f46e5;
}
// Browser smoothly animates the colour change

プロパティの値

トランジションするプロパティを指定します。すべてのアニメーション可能なプロパティをトランジションするにはallを使います。ただし、関係のないプロパティに意図しないトランジションが発生する可能性があります。パフォーマンスと予測可能性のため、明示的に指定してください。

.card {
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    opacity 0.15s linear;
}

/* Avoid 'all' in most cases */
.risky { transition: all 0.3s; }

Duration — 所要時間

トランジションの時間はs（秒）またはms（ミリ秒）で指定します。マイクロインタラクションには短い時間（100～200ms）を使います。コンポーネントの状態変化には中程度（200～400ms）、ページ全体のアニメーションには長め（400ms 以上）を使います。

Timing Functions — 動きの感覚

タイミング関数は加速のカーブを制御します。よく使われる値は、ease（デフォルト: ゆっくり始まり、中間で速くなり、ゆっくり終わる）、linear（一定速度）、ease-in（ゆっくり始まる）、ease-out（ゆっくり終わる）、ease-in-outです。カスタムカーブにはcubic-bezier(x1, y1, x2, y2)を使います。

.btn { transition: transform 0.2s ease-out; }
.toast { transition: opacity 0.3s ease-in-out; }
/* Custom cubic-bezier from cubic-bezier.com: */
.spring { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }

遅延 — 開始するタイミング

トランジションの遅延により、指定した時間が経過してからアニメーションが開始されます。複数の要素の開始をずらしたり、マウスを素早く動かしたときの意図しないホバーの発生を防いだりするために使用します。

.dropdown-menu {
  opacity: 0;
  transition: opacity 0.2s ease 0.1s; /* 100ms delay */
}
.dropdown:hover .dropdown-menu {
  opacity: 1;
}

transitionend イベント

JavaScriptでは、transitionend イベントを使ってトランジションの完了を検知できます。フェードアウト後に要素を削除したり、一連の処理の次のステップを開始したりする場合に便利です。

element.addEventListener('transitionend', (e) => {
  if (e.propertyName === 'opacity' && element.style.opacity === '0') {
    element.remove();
  }
});

要素の変形

transform プロパティはGPUアクセラレーションに対応しており、トランジションに最適です。よく使う変形には、translate()、scale()、rotate()、skew() があります。transform と opacity をアニメーションさせるとコンポジット処理だけが発生するため、最も高速な経路になります。

.card {
  transform: translateY(0) scale(1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 32px rgba(0,0,0,0.15);
}

トランジションできるもの

数値を持つプロパティなら、opacity、colour、transform、width、height、padding、border、font-size など、トランジションの対象にできます。display や visibility のようなプロパティは滑らかに変化しないため、フェードイン／フェードアウトには opacity を使用します。

実践: モーダルのフェードイン

少し小さい状態から拡大しながらフェードインするモーダルを作成します。JavaScriptで .open クラスを適用し、アニメーションはCSSに処理させます。

.modal {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}
.modal.open {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

パフォーマンス: transform と opacity を使う

レイアウトを引き起こすプロパティ（width、height、margin、top、left）のアニメーションは負荷が高くなります。ブラウザーがフレームごとにレイアウトを再計算するためです。滑らかな60fpsのアニメーションには、transform と opacity を使用してください。

クイックチェック

最高のパフォーマンスを得るには、どのCSSプロパティを優先してアニメーションさせるべきですか。

対話的なレッスンで答える

まとめ: CSSトランジション

transition: property duration timing delay を使用します。「all」ではなく、特定のプロパティをアニメーションさせます。自然な動きには ease、ease-out、ease-in-out を使用します。transitionend を検知して処理を連続させます。パフォーマンスのために transform と opacity を使用します。JavaScriptでクラスを切り替えてトランジションを開始します。

無料で開始

AI チューターと学ぶ HTML — 無料

ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。

コース: 41
レッスン: 163

無料で学習を始めるコース全体を表示

よくある質問

「トランジション：プロパティ・時間・タイミング」レッスンは無料ですか？

はい。「トランジション：プロパティ・時間・タイミング」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。

「トランジション：プロパティ・時間・タイミング」で何を学びますか？

transition を追加して CSS プロパティの変更を滑らかにアニメーション化し、適切な時間を設定し、ease-in-out などのイージング関数を選びます。ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Frontend Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン2/4です。

「トランジション：プロパティ・時間・タイミング」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このFrontend Academyレッスンでコードを書いて実行できますか？

はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Frontend Academyに戻る