ऑफसेट-पथ - सीएसएस-ट्रिक्स | सीएसएस पंचांग 2025

इस संपत्ति के रूप में जीवन शुरू किया motion-path। यह, और अन्य सभी संबंधित गति- * गुण, का नाम बदला जा रहा है- * कल्पना में। हम यहां पंचांग में नाम बदल रहे हैं। यदि आप इसे अभी उपयोग करना चाहते हैं, तो संभवतः दोनों वाक्यविन्यासों का उपयोग करना सबसे अच्छा है।

offset-pathसीएसएस में संपत्ति एनीमेशन के दौरान पालन करने के लिए एक तत्व के लिए एक आंदोलन पथ को परिभाषित करता है। यहाँ SVG पथ सिंटैक्स का उपयोग करके एक उदाहरण दिया गया है:

.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"); /* 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"); )

यह गुण एनिमेटेड नहीं हो सकता है, बल्कि यह एनीमेशन के लिए मार्ग को परिभाषित करता है। हम motion-offsetएनीमेशन बनाने के लिए संपत्ति का उपयोग करते हैं। यहां @keyframes के एनीमेशन के साथ गति-ऑफ़ को एनिमेट करने का एक सरल उदाहरण है:

.thing-that-moves ( 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 ( 100% ( motion-offset: 100%; /* Old */ offset-distance: 100%; /* New */ ) )

CodePen पर CSS-Tricks (@ css-tricks) द्वारा पथ के साथ एनिमेटेड करने का पेन सरल उदाहरण देखें।

इस डेमो में, offset-pathसीएसएस में हम सेट के साथ नारंगी सर्कल को एनिमेटेड किया जा रहा है । हमने वास्तव में उसी path()डेटा के साथ एसवीजी में उस रास्ते को आकर्षित किया है , लेकिन यह प्रस्ताव प्राप्त करने के लिए आवश्यक नहीं है।

मान लें कि हमने कुछ SVG एडिटिंग सॉफ़्टवेयर में इस तरह से एक मज़ेदार रास्ता बनाया:

हमें एक रास्ता मिलेगा:

dविशेषता मान है कि हम क्या कर रहे हैं के बाद है, और हम सीएसएस के लिए सीधे ले जाने और के रूप में उपयोग कर सकते हैं offset-path:

CodePen पर CSS-Tricks (@ css-tricks) द्वारा पेन zEpLRo देखें।

पथ सिंटैक्स में इकाई रहित मान पर ध्यान दें। यदि आप एसवीजी के भीतर एक तत्व के लिए सीएसएस को लागू कर रहे हैं, तो वे समन्वित मान उस एसवीजी के भीतर स्थापित समन्वय प्रणाली का उपयोग करेंगे viewBox। यदि आप गति को किसी अन्य HTML तत्व पर लागू कर रहे हैं, तो वे मान पिक्सेल होंगे।

यह भी ध्यान दें कि हमने उंगली के एक ग्राफिक का उपयोग करके यह दिखाने के लिए कि तत्व को स्वचालित रूप से कैसे घुमाया जाता है, ताकि यह आगे का सामना करे। आप इसे नियंत्रित कर सकते हैं offset-rotate:

.mover ( offset-rotate: auto; /* default, faces forward */ offset-rotate: reverse; /* faces backward */ offset-rotate: 30deg; /* set angle */ offset-rotate: auto 30deg; /* combine auto behavior with a set rotation */ )

मूल्यों

जैसा कि सबसे अच्छा हम बता सकते हैं, path()और noneइसके लिए केवल कार्यशील मूल्य हैं offset-path।

offset-pathसंपत्ति सब निम्न मान स्वीकार करने के लिए माना जाता है।

path(): SVG में एक पथ निर्दिष्ट करता है जो सिंटैक्स का समन्वय करता है
url: एक एसवीजी तत्व की आईडी को एक आंदोलन पथ के रूप में उपयोग करने के लिए संदर्भित करता है
basic-shape: सीएसएस आकार विनिर्देश के अनुसार एक आकृति निर्दिष्ट करता है, जिसमें शामिल हैं:
- circle()
- ellipse()
- inset()
- polygon()
मूल रूप से मूल आकार मान उत्पन्न करने के लिए Clippy एक भयानक उपकरण है।
none: कोई गति पथ निर्दिष्ट नहीं करता है

यहाँ कुछ परीक्षण दिए गए हैं:

CodePen पर CSS-Tricks (@ css-tricks) द्वारा पेन मोशन-पाथ वैल्यू टेस्ट देखें।

यहां तक कि एक एसवीजी तत्व को एक पथ का संदर्भ देने के लिए उसी एसवीजी के माध्यम से बताने से url()काम नहीं लगता है।

वेब एनिमेशन एपीआई के साथ

डैन विल्सन ने फ्यूचर यूज़: सीएसएस मोशन पाथ्स में से कुछ की खोज की। आपके पास जावास्क्रिप्ट में वेब एनिमेशन एपीआई के माध्यम से यह सब सामान है। उदाहरण के लिए, मान लें कि आपने offset-pathCSS में परिभाषित किया है , आप अभी भी जावास्क्रिप्ट के माध्यम से एनीमेशन को नियंत्रित कर सकते हैं:

CodePen पर CSS-Tricks (@ css-tricks) द्वारा पेन सीएसएस मोशनपाथ देखें।

और ज्यादा उदाहरण

सचेत! इनमें से बहुत से प्रस्ताव के परिवर्तन से पहले बनाए गए थे - * नामकरण से ऑफसेट- *। यदि आप बहुत इच्छुक हैं तो उन्हें ठीक करना बहुत आसान होना चाहिए।

पेन हूश देखें! CodePen पर मेरीह अकार (@merih) द्वारा।

CodePen पर Eric Willigers (@ericwilligers) द्वारा पेन pJarJO देखें।

कोडपेन पर Kseso (@Kseso) द्वारा गति-पथ पर पेन पैमाने पर कार देखें।

CodePen पर अली क्लेन (@AliKlein) द्वारा पेन सीएसएस मोशन पाथ एयरप्लेन देखें।

कोडपेन पर Path (@yisi) द्वारा एसवीजी पथ पर पेन सीएसएस चेतन देखें।

CodePen पर Dan Wilson (@danwilson) द्वारा पेन मोशन पाथ इनफिनिटी देखें।

CodePen पर Dan Wilson (@danwilson) द्वारा पेन सीएसएस मोशन पाथ स्पाइरल देखें।

CodePen पर 一丝 (@yisi) द्वारा पेन zGzJYd देखें।

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

offset-pathसंपत्ति अभी भी इस लेखन के समय एक प्रायोगिक सुविधा माना जाता है। यदि ब्राउज़र समर्थन की वर्तमान कमी आपको किसी परियोजना पर इसका उपयोग करने में संकोच करती है, तो आप इस स्तर के एनीमेशन के लिए जीएसएपी का उपयोग करने पर विचार कर सकते हैं, जिसे सारा अपने पद पर भी शामिल करती है। यह आपको वर्तमान में सबसे व्यापक ब्राउज़र समर्थन प्रदान करेगा।

यह ब्राउज़र सपोर्ट डेटा Caniuse का है, जिसमें अधिक विवरण हैं। एक संख्या इंगित करती है कि ब्राउज़र उस संस्करण और ऊपर की सुविधा का समर्थन करता है।

डेस्कटॉप

क्रोम	फ़ायर्फ़ॉक्स	अर्थात	एज	सफारी
४६	.२	नहीं न	। ९	नहीं न

मोबाइल / टेबलेट

Android क्रोम	Android फ़ायरफ़ॉक्स	एंड्रॉयड	iOS सफारी
88	.५	81	नहीं न

Chrome 46 और ओपेरा 33 (और संबंधित मोबाइल संस्करण) के रूप में, हमारे पास ब्लिंक (कोई ध्वज नहीं) में "प्रारंभिक समर्थन" है।

क्या इसे करने का और कोई तरीका है?

हमारे अपने सारा ड्रैसनर ने एसएमआईएल, एसवीजी के एनिमेशन के लिए मूल विधि के बारे में लिखा था, और animateMotionएसवीजी पथ के साथ वस्तुओं को कैसे एनिमेट किया जाता है। ऐसा लग रहा है:

लेकिन SMIL को निकाला जा रहा है! तो यह अनुशंसित नहीं है।

GreenSock एक और तरीका है, हालांकि, यह अनुशंसित है। सारा जीएसएपी + एसवीजी में पावर यूजर्स के लिए इस बारे में बात करती है: मोशन एग ए पाथ (एसवीजी की आवश्यकता नहीं है)। उदाहरण:

कोडप्रैन पर सारा ड्रैसनर (@sdras) द्वारा सच / गलत के लिए पेन डेमो देखें।