motion-offset। यह, और अन्य सभी संबंधित गति- * गुण, का नाम बदला जा रहा है- * कल्पना में। हम यहां पंचांग में नाम बदल रहे हैं। यदि आप इसे अभी उपयोग करना चाहते हैं, तो संभवतः दोनों वाक्यविन्यासों का उपयोग करना सबसे अच्छा है।
motion-offsetसीएसएस में संपत्ति का कहना है: कि अब तक कितने motion-pathआप कर रहे हैं? यह मोशन पाथ से जुड़ी एनिमेटेबल प्रॉपर्टी है।
.thing-that-moves ( /* "Old" syntax. Available in Blink browsers as of ~October 2015 */ motion-path: path('M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0'); motion-offset: 0%; /* Currently spec'd syntax. Should be in stable Chrome as of ~December 2016 */ offset-path: path('M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0'); offset-distance: 0%; animation: move 3s linear infinite; ) /* Animate the element along the path from 0% to 100% */ @keyframes move ( 100% ( motion-offset: 100%; /* Old */ offset-distance: 100%; /* New */ ) )ऊपर दिए गए उदाहरण में, हमने प्रारंभिक motion-offsetमान निर्धारित किया है 0%, हालांकि यह ध्यान देने योग्य है कि शून्य डिफ़ॉल्ट मान है, तब भी जब स्पष्ट रूप से परिभाषित नहीं किया गया है (हम इसे छोड़ सकते हैं)।
चर
offset-distanceसंपत्ति निम्न मान स्वीकार करता है:
lengthpercentage
दोनों स्थितियों में, मान पथ के प्रारंभिक बिंदु से दूरी की लंबाई निर्दिष्ट कर रहा है (डिफ़ॉल्ट है 0pxया 0%) पथ के अंतिम बिंदु तक।
उदाहरण
इस उदाहरण में, हमारे पास दो वृत्त हैं जहाँ एक छोटा वृत्त एक वृहत् वृत्त के मार्ग के साथ यात्रा करता है।
यहाँ SVG फ़ाइल है जिसका उपयोग हम आकृतियाँ बनाने के लिए कर रहे हैं:
अब, हम .markerअपने सीएसएस में .trackकक्षा को निर्देशांक का पालन करने के लिए सेट कर सकते हैं :
/* The motion-offset is zero by default */ .marker ( offset-path: path('M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0'); animation: move 3s linear infinite; ) @keyframes move ( /* Move the .marker from it's default value of 0% to 100% of the path's length */ 100% ( offset-distance: 100%; ) )कोडपेन पर ज्योफ ग्राहम (@geoffgraham) द्वारा पथ के साथ एनिमेटेड का पेन सरल उदाहरण देखें।
इसी तरह, हम offset-distanceमूल्य को 50% पर रोक सकते हैं और एनीमेशन रास्ते के चारों ओर आधे रास्ते से हट जाएगा:
कोडपेन पर ज्योफ ग्राहम (@geoffgraham) द्वारा पथ के साथ एनिमेटेड का पेन सरल उदाहरण देखें।
या, एनीमेशन की गति को नियंत्रित करने के लिए, हम offset-distanceचीजों को गति देने के लिए मूल्य को 300% तक बढ़ा सकते हैं। हालाँकि, अगर हमने समय की राशि निर्दिष्ट की है, जो पथ को यात्रा करने के लिए तत्व से अधिक मूल्य पर चलता है, तो जब तक एनिमेशन दोहराए जाने से पहले अपना अंतराल पूरा नहीं कर लेता, तब तक यह आंदोलन रुक जाएगा:
कोडपेन पर ज्योफ ग्राहम (@geoffgraham) द्वारा पथ के साथ एनिमेटेड का पेन सरल उदाहरण देखें।
ब्राउज़र का समर्थन
offset-distanceसंपत्ति अभी भी इस लेखन के समय एक प्रायोगिक सुविधा माना जाता है और वहाँ ब्राउज़र समर्थन पर कोई प्रलेखन है। हालांकि, motion-pathसमर्थन पर प्रलेखन है और हम उस समय के लिए आधार रेखा के रूप में उपयोग कर सकते हैं।
यह ब्राउज़र सपोर्ट डेटा Caniuse का है, जिसमें अधिक विवरण हैं। एक संख्या इंगित करती है कि ब्राउज़र उस संस्करण और ऊपर की सुविधा का समर्थन करता है।
डेस्कटॉप
| क्रोम | फ़ायर्फ़ॉक्स | अर्थात | एज | सफारी |
|---|---|---|---|---|
| ४६ | .२ | नहीं न | । ९ | नहीं न |
मोबाइल / टेबलेट
| Android क्रोम | Android फ़ायरफ़ॉक्स | एंड्रॉयड | iOS सफारी |
|---|---|---|---|
| 88 | .५ | 81 | नहीं न |
अतिरिक्त जानकारी
- मोशन पाथ मॉड्यूल स्तर 1 कल्पना
- कोडपेन पर उदाहरण
- वेबिट टिकट # 139128
- मोज़िला टिकट # 1186329
- Microsoft एज सुविधा अनुरोध