animationTimingFunction का उपयोग यह निर्दिष्ट करने के लिए किया जाता है कि एनिमेशन अपने चक्र के दौरान कैसे आगे बढ़ता है। यह एनिमेशन के लिए स्पीड कर्व सेट या रिटर्न करके ऐसा करता है। स्पीड कर्व परिभाषित करता है कि संक्रमण कितने सहज होंगे, यह निर्दिष्ट करके कि एनिमेशन को एक स्थिति से दूसरी स्थिति में जाने में कितना समय लगता है।
सिंटैक्स
animationTimingFunction प्रॉपर्टी सेट करने के लिए सिंटैक्स निम्नलिखित है:
object.style.animationTimingFunction = "linear|ease|ease-in|ease-out|cubic-bezier(n, n, n, n)|initial|inherit"
मान
निम्नलिखित मान हैं:
| क्रमांक | मान एवं विवरण |
|---|---|
| 1 | linear यह निर्दिष्ट करता है कि एनिमेशन की गति पूरे एनिमेशन के दौरान समान रहती है। |
| 2 | ease यह डिफ़ॉल्ट मान है जो निर्दिष्ट करता है कि एनिमेशन की शुरुआत और अंत धीमा होता है लेकिन बीच में तेज होता है। |
| 3 | ease-in एनिमेशन की शुरुआत धीमी होती है। |
| 4 | ease-out एनिमेशन का अंत धीमा होता है। |
| 5 | ease-in-out एनिमेशन शुरुआत में धीमा और अंत में भी धीमा होता है। |
| 6 | cubic-bezier(n, n, n,n) अपने कस्टम मानों के लिए क्यूबिक-बेजियर फ़ंक्शन को परिभाषित करने के लिए। |
| 7 | initial इस प्रॉपर्टी को उसके प्रारंभिक मान पर सेट करने के लिए। |
| 8 | inherit पैरेंट प्रॉपर्टी मान को विरासत में लेने के लिए। |
उदाहरण
animationTimingFunction प्रॉपर्टी का उदाहरण देखते हैं:
<!DOCTYPE html> <html> <head> <style> #PARA1{ border: 2px solid black; position: relative; animation: demo 5s infinite; animation-timing-function: linear; } @keyframes demo { from {background-color: lightcoral; color:black;} to {background-color: indigo; color:white;} } </style> <script> function timingChange(){ document.getElementById("PARA1").style.animationTimingFunction="ease"; document.getElementById("Sample").innerHTML="The animation timing is now set to ease."; } </script> </head> <body> <p id="PARA1"> Lacus vel facilisis volutpat est velit. Id interdum velit laoreet id donec ultrices. Praesent semper feugiat nibh sed pulvinar proin gravida hendrerit. Viverra nibh cras pulvinar mattis nunc sed blandit libero.</p> <p>Click the below button to change the above animation name</p> <button onclick="timingChange()">CHANGE TIMING</button> <p id="Sample"></p> </body> </html>
आउटपुट
यह निम्नलिखित आउटपुट उत्पन्न करेगा:
CHANGE TIMING बटन पर क्लिक करने पर:
