CSS cubic-bezier() कार्य

परिभाषा और उपयोग

CSS का cubic-bezier() कार्यों द्वारा तीन बीजल वक्र को परिभाषित करने के लिए इस्तेमाल किया जाता है。

तीन बीजल वक्र चार बिन्दुओं P0, P1, P2 और P3 द्वारा परिभाषित होती हैं। CSS में P0 और P3 वक्र के आरंभ और अंत हैं, और इन बिन्दुओं के निर्देशांक निश्चित अनुपात हैं। P0 (0, 0) है, जो प्रारंभिक समय और प्रारंभिक स्थिति को प्रतिनिधित्व करता है; P3 (1, 1) है, जो अंतिम समय और अंतिम स्थिति को प्रतिनिधित्व करता है।

cubic-bezier() कार्यों के साथ इस्तेमाल किया जा सकता है animation-timing-function गुण और transition-timing-function गुणों को साथ में इस्तेमाल किया जाता है。

उदाहरण

उदाहरण 1

एक से लेकर अंत तक गति में परिवर्तन वाला ट्रांजिशन असर:

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
  transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}

खुद से प्रयोग करें

उदाहरण 2

विभिन्न तीन बीजल की गति मान के साथ प्रदर्शित करने वाले <div> एलीमेंट:

#div1 {animation-timing-function: cubic-bezier(0,0,1,1);}
#div2 {animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {animation-timing-function: cubic-bezier(0.42,0,0.58,1);}

खुद से प्रयोग करें

CSS ग्रामर

cubic-bezier(x1,y1,x2,y2)

तकनीकी विवरण

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

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

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

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

संदर्भ：CSS ट्रांसिशन-टाइमिंग-फ़ंक्शन प्रभाव