CSS क्यूबिक-बेज़ियर () फ़ंक्शन
उदाहरण
शुरू से अंत तक परिवर्तनशील गति के साथ एक संक्रमण प्रभाव:
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}
परिभाषा और उपयोग
क्यूबिक-बेज़ियर () फ़ंक्शन क्यूबिक बेज़ियर वक्र को परिभाषित करता है।
एक घन बेजियर वक्र को चार बिंदुओं P0, P1, P2 और P3 द्वारा परिभाषित किया गया है। P0 और P3 वक्र की शुरुआत और अंत हैं और, CSS में ये बिंदु तय किए गए हैं क्योंकि निर्देशांक अनुपात हैं। P0 (0, 0) है और प्रारंभिक समय और प्रारंभिक अवस्था का प्रतिनिधित्व करता है, P3 (1, 1) है और अंतिम समय और अंतिम स्थिति का प्रतिनिधित्व करता है।
क्यूबिक-बेज़ियर () फ़ंक्शन का उपयोग एनीमेशन-टाइमिंग-फ़ंक्शन प्रॉपर्टी और ट्रांज़िशन-टाइमिंग-फ़ंक्शन प्रॉपर्टी के साथ किया जा सकता है।
संस्करण: | CSS3 |
---|
ब्राउज़र समर्थन
तालिका में संख्याएं पहले ब्राउज़र संस्करण को निर्दिष्ट करती हैं जो फ़ंक्शन का पूर्ण समर्थन करता है।
Function | |||||
---|---|---|---|---|---|
cubic-bezier() | 4.0 | 10.0 | 4.0 | 3.1 | 10.5 |
सीएसएस सिंटेक्स
cubic-bezier(x1,y1,x2,y2)
Value | Description |
---|---|
x1,y1,x2,y2 | Required. Numeric values. x1 and x2 must be a number from 0 to 1 |