0Pricing
CSS Academy · レッスン

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

どのプロパティをトランジションさせるか、所要時間、delayによる開始時期を定義します。

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

CSSトランジションとは

CSSトランジションは、値が変化したとき（ホバー時など）に、指定した時間をかけて2つのプロパティ値の間を補間します。JavaScriptは必要ありません。

transition-property

アニメーションするCSSプロパティを指定します。アニメーション可能なすべてのプロパティをトランジションさせるにはallを使用し、特定のプロパティを一覧で指定することもできます。

  <button>Save changes</button>

transition-duration

トランジションにかかる時間を設定します。秒（s）またはミリ秒（ms）の時間値を指定できます。

  <div class="card">Card</div>

transitionのショートハンド

4つのトランジション用サブプロパティをまとめて指定します：property | duration | timing-function | delay。

  <button class="btn">Submit</button>

複数のトランジション

複数のトランジションをカンマで区切って指定すると、異なるプロパティを個別にアニメーションできます。

  <div class="card">Card</div>

transition-delay

トランジションの開始を遅らせます。アニメーションの順序を調整したり、別のトランジションが始まる前に一つのトランジションを完了させたりする場合に便利です。

  <nav>
    <a class="nav-item" href="#">Home</a>
    <a class="nav-item" href="#">About</a>
    <a class="nav-item" href="#">Contact</a>
  </nav>

ベース状態でのトランジション

transitionプロパティは、:hover状態ではなく、必ずベース状態に配置してください。これにより、ホバー開始時とホバー解除時の両方でトランジションが実行されます。

  <button class="btn demo-active">Hover me</button>

トランジション可能なプロパティ

数値を扱うCSSプロパティの多くはトランジションできます。色、寸法、不透明度、変形などが該当します。displayのような離散的なプロパティは滑らかに補間できず、瞬時に切り替わります。

transition: allの注意点

transition: allを使うと、アニメーションさせるつもりのないプロパティまで予期せずアニメーションすることがあります。本番コードでは、必ずプロパティを明示的に指定してください。

色のトランジション

色のトランジションでは、値の間が補間されます。最適な結果を得るには、同じ色形式を使用してください。

  <button class="btn demo-active">Hover me</button>

トランジションとレイアウトスラッシング

パフォーマンス上の理由から、width、height、margin、paddingのようなレイアウトを引き起こすプロパティのトランジションは避けてください。アニメーションのフレームごとにレイアウトの再計算が発生します。代わりにtransformとopacityを使用してください。

簡単な確認

ホバー開始時とホバー解除時の両方でtransitionを実行するには、どこに配置すればよいですか？

まとめ

CSSトランジションは、transition-property、duration、timing-function、delayを使って、プロパティの変化を時間の経過に合わせて滑らかにします。双方向のアニメーションを実現するには、ベース状態にトランジションを配置します。パフォーマンスと予測しやすさのため、allよりも特定のプロパティ一覧を優先してください。

よくある質問

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

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

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

どのプロパティをトランジションさせるか、所要時間、delayによる開始時期を定義します。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

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

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

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

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

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

  1. トランジションのプロパティ・期間・タイミング
  2. イージング関数：ease、linear、cubic-bezier
  3. 複数プロパティのトランジション
  4. パフォーマンス：変形可能なプロパティと再描画されるプロパティ
← CSS Academyに戻る