【transition-delay】トランジションの開始時間

#sample1 {
         width: 150px;
         height: 150px;
         background-color: gray;
         transition-property: background-color;
         transition-duration: 3s;
         transition-timing-function: ease;
}
#sample1:hover {
         background-color: blue;
}

下記の四角にマウスカーソルを乗せると、すぐにトランジションが開始します。

#sample2 {
         width: 150px;
         height: 150px;
         background-color: gray;
         transition-property: background-color;
         transition-duration: 3s;
         transition-timing-function: ease;
         trasition-delay: 1s;
}
#sample2:hover {
         background-color: blue;
}

下記の四角にはtransition-delayプロパティで1sが指定されているので、マウスカーソルを乗せると1秒後にトランジションが開始します。