CSS transition-delay प्रॉपर्टी से ट्रांजिशन प्रभाव में देरी करें

CSS में transition-delay प्रॉपर्टी का उपयोग करके ट्रांजिशन प्रभाव को निर्दिष्ट समय तक विलंबित किया जा सकता है। यह प्रॉपर्टी सेकंड (s) या मिलीसेकंड (ms) में मान स्वीकार करती है।

उदाहरण

नीचे दिए गए उदाहरण में, <div> पर होवर करने पर चौड़ाई बदलने का ट्रांजिशन 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>Heading One</h1>
  <p>Hover over the below box to change its width. It begins with a delay of 1 second.</p>
  <div></div>
</body>
</html>

नोट: transition-delay का उपयोग करके आप ट्रांजिशन शुरू होने से पहले का इंतजार समय सेट कर सकते हैं।