HTML DOM Style transitionTimingFunction प्रॉपर्टी

विवरण

HTML DOM Style transitionTimingFunction प्रॉपर्टी किसी तत्व के ट्रांजिशन प्रभाव के स्पीड कर्व को दर्शाने वाले फ़ंक्शन को प्राप्त और संशोधित करती है।

सिंटैक्स

1. transitionTimingFunction प्राप्त करना

object.transitionTimingFunction

2. transitionTimingFunction संशोधित करना

object.transitionTimingFunction = "ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier() | initial | inherit"

उदाहरण

आइए HTML DOM Style transitionTimingFunction प्रॉपर्टी का एक उदाहरण देखें:

<!DOCTYPE html> <html> <style> 
  body { 
    color: #000; 
    height: 100vh; 
  } 
  .btn { 
    background: #db133a; 
    border: none; 
    height: 2rem; 
    border-radius: 2px; 
    width: 40%; 
    display: block; 
    color: #fff; 
    outline: none; 
    cursor: pointer; 
    margin: 1rem 0; 
  } 
  .circle { 
    height: 100px; 
    width: 100px; 
    background-color: #db133a; 
  } 
  .circle:hover { 
    height: 200px; 
    width: 200px; 
    border-radius: 50%; 
    transition: all 2s; 
  } 
  .show { 
    font-size: 1.2rem; 
    margin: 1rem 0; 
  } 
</style> <body> 
<h1>DOM Style transitionTimingFunction प्रॉपर्टी डेमो</h1> 
<div class='circle'></div> 
<button onclick="set()" class="btn">transitionTimingFunction सेट करें</button> 
<div class="show">अब, वर्ग पर होवर करें</div> 
<script> 
  function set() { 
    document.querySelector('.circle').style.transitionTimingFunction = "ease-in-out"; 
  } 
</script> </body> </html>

आउटपुट

"transitionTimingFunction सेट करें" बटन पर क्लिक करें और फिर "लाल" वर्ग पर होवर करके transitionTimingFunction प्रभाव देखें।