CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのtransition-delayプロパティの使い方：トランジション効果に遅延を設定する方法

CSSのtransition-delayプロパティとは

CSSのtransition-delayプロパティを使用すると、トランジション（transition）効果の開始を指定した時間だけ遅らせることができます。要素に変化が発生しても、設定した待機時間が経過するまでアニメーションは実行されません。

このプロパティは、ユーザーインターフェースにリズム感を持たせたり、複数のアニメーションを順番に実行させたりする場合に非常に便利です。

transition-delayの基本的な使い方

以下のコード例では、ボックスにマウスカーソルを乗せると幅が変化しますが、トランジション開始まで1秒間の遅延が発生するように設定しています。

サンプルコード

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            width: 150px;
            height: 150px;
            background: blue;
            transition: width 3s;
            transition-delay: 1s;
         }
         div:hover {
            width: 250px;
         }
      </style>
   </head>
   <body>
      <h1>見出し</h1>
      <p>下のボックスにマウスカーソルを乗せると幅が変わります。1秒の遅延後にアニメーションが始まります。</p>
      <div></div>
   </body>
</html>

コードの解説

上記の例では、以下のようにスタイルを設定しています。

  • width: 150px; height: 150px; — 青い正方形のボックスを定義
  • transition: width 3s; — 幅の変更に対して3秒かけてスムーズに変化させる
  • transition-delay: 1s; — トランジションの開始を1秒間遅らせる
  • div:hover { width: 250px; } — ホバー時に幅を250pxへ変更

マウスカーソルをボックスに乗せると、まず1秒間待機した後、幅が3秒かけて150pxから250pxへと滑らかに拡大します。

補足ポイント

  • transition-delayの値には秒（s）またはミリ秒（ms）を指定できます。例：0.5s、500ms
  • 負の値（例：-1s）を指定すると、アニメーションの途中から再生されます
  • transitionショートハンドプロパティを使えば、transition: width 3s 1s; のように遅延時間をまとめて記述することも可能です
  1. CSSのperspectiveプロパティの使い方を解説！3D要素の奥行き表現

    CSSの perspective プロパティは、3D変形された要素をどのような視点・奥行き感で表示するかを指定するためのプロパティです。値には距離（pxなど）を設定し、数値が小さいほど視点に近づくため、遠近感が強調され、大きいほどフラットな見た目になります。通常は、3D変形を適用する子要素の親要素に perspective を設定します。これにより、子要素の transform による回転や移動に自然な立体感が生まれます。以下のコードでは、親要素に perspective: 80px; を指定し、子要素をX軸方向に45度回転させて、遠近効果を確認できます。サンプルコード<!DOCTYPE

  2. CSSのwidthプロパティをアニメーション化する方法

    CSSで要素の width（幅）プロパティをアニメーションさせるには、@keyframes ルールと animation プロパティを組み合わせて使用します。幅の変化を滑らかに表現することで、開閉パネルやホバーエフェクトなど、さまざまなインタラクティブな演出が可能になります。実装のポイント@keyframes 内で、アニメーションの途中経過（例：30%）における幅の値を指定します。animation プロパティで、キーフレーム名・再生時間などを設定します。幅は数値（px など）で指定するため、ブラウザは値の補間を行い滑らかなアニメーションを実現します。サンプルコード以下のコードでは、div要素