एनीमेशनटाइमिंगफंक्शन का उपयोग यह निर्दिष्ट करने के लिए किया जाता है कि एनीमेशन अपने चक्र के दौरान किस तरह से आगे बढ़ता है। यह एनीमेशन के लिए गति वक्र को सेट या वापस करके ऐसा करता है। गति वक्र परिभाषित करता है कि एनीमेशन को एक राज्य से दूसरे राज्य में ले जाने में लगने वाले समय को निर्दिष्ट करके संक्रमण कितना सहज होगा।
सिंटैक्स
−
. के लिए वाक्य रचना निम्नलिखित हैएनीमेशनटाइमिंगफंक्शन प्रॉपर्टी सेट करना -
object.style.animationTimingFunction = "linear|ease|ease-in|ease-out|cubic-bezier(n, n, n, n)|initial|inherit"
मान
निम्नलिखित मान हैं -
| Sr.No | मान और विवरण |
|---|---|
| 1 | रैखिक यह निर्दिष्ट करता है कि एनीमेशन के दौरान एनीमेशन की गति समान है। |
| 2 | आसानी से यह डिफ़ॉल्ट मान है जो निर्दिष्ट करता है कि एनिमेशन का प्रारंभ और अंत धीमा है लेकिन बीच में तेज़ है। |
| 3 | आसानी से एनीमेशन की शुरुआत धीमी है। |
| 4 | आसानी से बाहर एनीमेशन का अंत धीमा है। |
| 5 | आसानी से बाहर निकलें एनिमेशन शुरुआत में धीमा है और अंत में भी धीमा है। |
| 6 | घन-बेज़ियर(n, n, n,n) अपने कस्टम मानों के लिए क्यूबिक-बेज़ियर फ़ंक्शन को परिभाषित करने के लिए। |
| 7 | प्रारंभिक इस संपत्ति को प्रारंभिक मूल्य पर सेट करने के लिए। |
| 8 | उत्तराधिकारी मूल संपत्ति मूल्य प्राप्त करने के लिए। |
उदाहरण
आइए एनीमेशन टाइमिंग फंक्शन प्रॉपर्टी के उदाहरण को देखें -
<!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> आउटपुट
यह निम्नलिखित आउटपुट देगा -
चेंज टाइमिंग बटन पर क्लिक करने पर -
