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

CSSのtransition-delayプロパティで遷移効果に遅延を設定する方法

CSSでトランジション（遷移効果）の開始を遅らせたい場合は、transition-delay プロパティを使用します。このプロパティに秒数（s）やミリ秒（ms）を指定することで、変化が始まるまでの待ち時間を自由にコントロールできます。

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>

コードの解説

この例では、div要素に対して transition: width 3s; を指定し、幅の変更が3秒かけて滑らかに行われるように設定しています。さらに transition-delay: 1s; を追加することで、ホバーしてから実際にアニメーションが始まるまで1秒間の待機時間が発生します。

主なポイント

  • transition-delay：遷移効果が始まるまでの待ち時間を指定します。単位は秒（s）またはミリ秒（ms）です。
  • transition ショートハンドを使えば、transition: width 3s 1s; のように、所要時間と遅延時間をまとめて指定することも可能です。
  • 負の値を指定すると、アニメーションが途中から開始されるという特殊な挙動も実現できます。

transition-delayを活用することで、ユーザーの操作に対して意図的なタイムラグを持たせた、より洗練されたインタラクション表現が可能になります。

  1. CSSだけで作る視差スクロール（パララックス）効果の実装方法

    CSSだけで視差スクロール（パララックス）効果を実現するには、background-attachment: fixed; を使用します。このプロパティを指定すると、背景画像がブラウザの表示ブラウザの表示領域（ビューポート）に固定され、ページをスクロールしても背景だけが動かなくなります。その結果、前景のコンテンツと背景との間に速度の違いが生まれ、奥行きのある視差効果を演出できます。 コード例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=

  2. CSSでホバー時にトランジション（アニメーション）を追加する方法を解説

    CSSでホバー時にトランジション（滑らかなアニメーション効果）を追加するには、transitionプロパティと:hover疑似クラスを組み合わせて使用します。あらかじめ要素にtransitionを設定しておくことで、ホバー時の変化が瞬時に切り替わるのではなく、指定した時間をかけてスムーズに変化するようになります。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1&q