CSS辞典 transition-delayプロパティ解説

トランジションが開始されるまでの待ち時間を指定するプロパティを指定する「transition-delayプロパティ」の使用方法を記載

対応バージョン:CSS3/2.1

対応ブラウザ

ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:chrome
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:firefox
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:safari
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms edge
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms ie
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:opera
初期値0s
適用される要素すべての要素(::before疑似要素、::after疑似要素を含む)
モジュールCSS Transitions
継承なし

概要・使用方法

{ transition-delay: 時間;}

「transition-delayプロパティ」は、トランジションが開始されるまでの待ち時間を指定します。待ち時間が経過すると変化が開始されます。

指定できる値(プロパティ名)

数値+単位数値で指定できます。単位はs(秒)、ms(秒)が付かれます。カンマ(,)で区切って複数指定することができます。

サンプルコード

マウスオーバーしてから3秒後に変化があります。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>transition-delayプロパティCSSフォントサンプルページ</title>
    <meta charset="uft-8">
    <style>
    
    .delay-btn{
        width:400px;
        height:30px;
        text-align:center;
        background-color:silver;
        transition-property: all;
        transition-duration: 2s;
        
    }
    .delay-btn:hover{
         background-color:red;
         width:200px;
         height:100px;
    }
    
    .delay-ease       {transition-timing-function:ease;}
    .delay3s          {transition-delay:3s;}
   
    </style>
  </head>
  <body>
      <div class="delay-btn timing-ease">delayなし</div>
      <div class="delay-btn timing-ease delay3s">delayあり(3秒)</div>
  </body>
</html>

実行結果

delayなし
delayあり(3秒)