CSS steps() फ़ंक्शन

वर्णन और उपयोग

CSS का steps() फ़ंक्शन एनीमेशन के लिए चरण समय-निर्धारण फ़ंक्शन बनाने के लिए इस्तेमाल किया जाता है。

यह फ़ंक्शन एनीमेशन अवधि को निर्दिष्ट संख्या (n) के समानांतर अंतरालों में विभाजित करता है।उदाहरण के लिए: यदि n 4 है, तो एनीमेशन को 4 भागों में विभाजित किया जाएगा।यह 0% से 100% को 4 भागों में विभाजित करेगा; जो 0%-25%、25%-50%、50%-75% और 75%-100% हैं。

उदाहरण

एनीमेशन के लिए अलग-अलग चरण समय-निर्धारण फ़ंक्शन बनाएं:

div.a {
  animation: mymove 5s steps(4, end);
}
div.b {
  animation: mymove 5s steps(6, jump-start);
}
div.c {
  animation: mymove 5s steps(4, jump-none);
}
div.d {
  animation: mymove 5s steps(4, jump-both);
}

अपने आप प्रयोग करें

CSS व्याकरण

steps(n, step-position)
मूल्य वर्णन
n आवश्यक।बीच के कदमों/अंतरालों को निर्दिष्ट करें。
step-position

वैकल्पिक।वैल्यू के बीच जुम्मा होने वाले समय को निर्दिष्ट करें।इस लिए निम्नलिखित एक शब्द इस्तेमाल करें:

  • jump-start या start: एनीमेशन की शुरुआत में पहला कदम होता है
  • jump-end या end: एनीमेशन के अंत में आखिरी कदम होता है।end डिफ़ॉल्ट मान है
  • jump-none: आगे या देरी की जुम्मा नहीं होती
  • jump-both: साथ-साथ आगे और देरी की जुम्मा होती है

तकनीकी विवरण

संस्करण: CSS Easing Functions Level 1

ब्राउज़र समर्थन

तालिका में दिए गए नंबर इसके लिए पूरी तरह से समर्थन करने वाले पहले ब्राउज़र का संस्करण हैं।

Chrome Edge फ़ायरफॉक्स सफारी ओपेरा
77 79 65 14 64

संबंधित पृष्ठ

संदर्भ:सीएसएस एनीमेशन गुण

संदर्भ:सीएसएस एनीमेशन-टाइमिंग-फ़ंक्शन गुण