CSS transition-duration से होवर प्रभाव की गति सेट करें

CSS transition-duration प्रॉपर्टी ट्रांजिशन प्रभाव के पूरा होने में लगने वाला समय निर्दिष्ट करती है। :hover स्यूडो-क्लास के साथ संयोजन करके होवर प्रभाव की गति को नियंत्रित किया जा सकता है।

उदाहरण

नीचे दिए गए उदाहरण में, बटन पर transition-duration: 2s सेट करके होवर प्रभाव (बैकग्राउंड रंग और बॉर्डर बदलाव) को 2 सेकंड में पूरा होने के लिए कॉन्फ़िगर किया गया है।

<!DOCTYPE html>
<html>
<head>
  <style>
    .btn {
      background-color: yellow;
      color: black;
      text-align: center;
      font-size: 15px;
      padding: 20px;
      border-radius: 15px;
      border: 3px dashed blue;
      transition-duration: 2s;
    }
    .btn:hover {
      background-color: orange;
      color: black;
      border: 3px solid blue;
    }
  </style>
</head>
<body>
  <h2>Result</h2>
  <p>Click below for result:</p>
  <button class="btn">Result</button>
</body>
</html>

transition-duration के मान:

• time - सेकंड (s) या मिलीसेकंड (ms) में, जैसे 2s, 500ms, 0.3s
• 0s (डिफ़ॉल्ट) - कोई ट्रांजिशन नहीं, तत्काल परिवर्तन
• कॉमा से अलग करके कई प्रॉपर्टीज के लिए अलग-अलग अवधि: transition-duration: 2s, 1s

संबंधित प्रॉपर्टीज: transition-property, transition-timing-function, transition-delay, शॉर्टहैंड transition।