CSS辞典 transition-delayプロパティ解説
トランジションが開始されるまでの待ち時間を指定するプロパティを指定する「transition-delayプロパティ」の使用方法を記載
対応バージョン：CSS3／2.1
対応ブラウザ
| 初期値 | 0s |
| 適用される要素 | すべての要素（::before疑似要素、::after疑似要素を含む） |
| モジュール | CSS Transitions |
| 継承 | なし |
概要・使用方法
{ transition-delay: 時間;}「transition-delayプロパティ」は、トランジションが開始されるまでの待ち時間を指定します。待ち時間が経過すると変化が開始されます。
指定できる値（プロパティ名）
| 数値+単位 | 数値で指定できます。単位はs（秒）、ms（秒）が付かれます。カンマ（,）で区切って複数指定することができます。 |
サンプルコード
マウスオーバーしてから３秒後に変化があります。
<!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あり（３秒）</div>
</body>
</html>実行結果
delayなし
delayあり（３秒）