← Back to CSS Course | Chapter 9: Modern CSS Features | Lesson 11 of 25

CSS Motion Path

किसी curvy wire में पिरोए गए एक bead की कल्पना करें। जैसे-जैसे आप bead को wire के साथ धकेलते हैं, यह straight line में move होने के बजाय wire के exact curve को follow करता है। CSS Motion Path आपको किसी element को एक custom path -- एक curve, एक circle, या एक SVG shape -- से जोड़ने देता है ताकि element automatically उसके साथ glide करे, अपने चलने की direction को match करने के लिए rotate होते हुए।

In this page:

  1. offset-path से एक Track Define करना
  2. offset-distance से Path के साथ Position करना
  3. offset-rotate से Element को Orient करना
  4. offset-anchor से Pivot Set करना
  5. offset Shorthand
Syntax
css 
selector {
  offset-path: path("M x y ...");
  offset-distance: percentage;
  animation: animation-name duration;
}

offset-path से एक Track Define करना

offset-path किसी element के चलने के लिए एक invisible track draw करता है, circle(), ellipse(), या एक literal SVG path() string जैसे shapes इस्तेमाल करके defined। कुछ भी तब तक move नहीं होता जब तक आप offset-distance भी set न करें, क्योंकि offset-path सिर्फ route declare करता है, उस पर position नहीं।

Note:
  • हाथ से लिखे curves की कोशिश करने से पहले किसी SVG editor से copy किए गए एक simple path() shape से शुरू करें।
  • Accepted values:
  • none — default, कोई motion path नहीं
  • path('M 0 0 L 100 100') — एक SVG path
  • circle() | ellipse() | polygon() — basic shapes
  • ray(<angle>) — एक angle पर एक straight line
  • url(#svg-shape) — एक SVG element को reference करता है
  • inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
Warning: offset-path वाले लेकिन offset-distance न वाले किसी element में कुछ नहीं होता दिखेगा, क्योंकि यह default रूप से path के starting point पर होता है।

उदाहरण: Defining a Track with offset-path

css 
<style>
.box {
  width: 40px;
  height: 40px;
  background: coral;
  offset-path: circle(80px at 100px 100px);
}
</style>
<div class="box">Track defined, but nothing moves yet</div>

offset-distance से Path के साथ Position करना

offset-distance तय करता है कि element इस समय offset-path के साथ कितनी दूर बैठा है, एक percentage (0% start है, 100% end है) या एक absolute length के रूप में express किया गया। इस value को 0% से 100% तक animate करना ही track के साथ gliding motion produce करता है।

Note:
  • किसी element को समय के साथ अपने path पर smoothly travel कराने के लिए एक @keyframes rule के अंदर offset-distance animate करें।
  • Accepted values:
  • offset-distance: 0% — path की शुरुआत (default)
  • offset-distance: 100% — path का अंत
  • offset-distance: <length> — path के साथ absolute distance
  • offset-distance: <percentage> — path length का proportion
  • inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
Warning: किसी non-closed path पर offset-distance को 100% से ऊपर set करने का कोई आगे असर नहीं होता, क्योंकि element बस path के अंत पर रुक जाता है।

उदाहरण: Positioning Along the Path with offset-distance

css 
<style>
.box {
  offset-path: circle(80px at 100px 100px);
  offset-distance: 50%;
}
</style>
<div class="box">Sits halfway along the path</div>

offset-rotate से Element को Orient करना

Default रूप से, किसी path पर travel करने वाला element automatically उस direction का सामना करने के लिए rotate होता है जिसमें यह move कर रहा है, जैसे किसी curve पर car steer कर रहा हो। offset-rotate आपको इसे override करने देता है: element की orientation को constant रखने के लिए इसे एक fixed angle set करें, या automatic rotation के ऊपर एक offset जोड़ें।

Note:
  • जब आप चाहते हैं कि किसी text label जैसा element path के curve चाहे जो भी हो upright रहे तो offset-rotate: 0deg इस्तेमाल करें।
  • Accepted values:
  • offset-rotate: auto — default, path direction का सामना करता है
  • offset-rotate: reverse — पीछे की तरफ़ सामना करता है
  • offset-rotate: <angle> — एक fixed angle
  • offset-rotate: auto <angle> — path direction plus एक offset
  • inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
Warning: एक fixed offset-rotate angle को किसी तीखे curving path के साथ combine करना element को sideways या backwards move करते हुए दिखा सकता है।

उदाहरण: Orienting the Element with offset-rotate

css 
<style>
.label {
  offset-path: circle(80px at 100px 100px);
  offset-distance: 25%;
  offset-rotate: 0deg;
}
</style>
<div class="label">Stays upright regardless of the path's curve</div>

offset-anchor से Pivot Set करना

offset-anchor चुनता है कि element के अंदर कौन-सा point path के साथ aligned है, बिल्कुल जैसे transform-origin rotation के लिए एक pivot set करता है। Default रूप से यह element का center है, लेकिन आप इसे किसी edge या corner पर shift कर सकते हैं ताकि element का एक specific हिस्सा line पर exactly ride करे।

Note:
  • किसी pin-shaped icon को animate करते समय offset-anchor: top इस्तेमाल करें ताकि उसका tip, center नहीं, path को precisely track करे।
  • Accepted values:
  • offset-anchor: auto — default, transform-origin इस्तेमाल करता है
  • offset-anchor: center — बीच में pivot
  • offset-anchor: <position> — जैसे top left
  • offset-anchor: <length> <length> — explicit point
  • inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
Warning: किसी बड़े element पर offset-anchor adjust करना भूल जाना इसे path को follow करने के बजाय उससे floating off दिखा सकता है।

उदाहरण: Setting the Pivot with offset-anchor

css 
<style>
.pin {
  offset-path: circle(80px at 100px 100px);
  offset-distance: 25%;
  offset-anchor: top;
}
</style>
<div class="pin">The tip, not the center, rides exactly on the line</div>

offset Shorthand

offset वह shorthand property है जो offset-path, offset-distance, offset-rotate, और offset-anchor को एक declaration में combine करती है, उसी spirit में जैसे background या font shorthands related longhands को bundle करते हैं।

एक बार जब आप हर individual piece में सहज हो जाएँ, यह motion-path rules को compact रखती है।

Note:
  • एक बार जब आप चार longhands को individually समझ लें तो offset shorthand इस्तेमाल करें, क्योंकि shorthand typos को debug करना एक बार में एक property debug करने से ज़्यादा मुश्किल है।
  • Accepted values:
  • offset: <path> <distance> <rotate> — path, distance, rotation order
  • offset: path('...') 50% auto — typical इस्तेमाल
  • offset: <position> <path> ... / <anchor> — optional शुरुआती position पहले, optional anchor slash के बाद
  • offset: none — reset करता है
  • inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
Warning: offset shorthand से किसी value को छोड़ना उस piece को उसकी initial value पर reset कर देता है, जो चुपचाप stylesheet में पहले set किए गए किसी longhand को undo कर सकता है।

उदाहरण: The offset Shorthand

css 
<style>
.box {
  offset: circle(80px at 100px 100px) 50% 0deg;
}
</style>
<div class="box">Path, distance, and rotation in one declaration</div>
Live Example
Related Topics

CSS Clip Path · CSS Math Functions · CSS @supports · CSS Masking

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
आम गलतियां
  1. एक शुरुआती offset-distance define करना भूल जाना, इसलिए element animate होने तक बिना किसी visible motion के path की बिल्कुल शुरुआत में बैठा रहता है।
  2. offset-rotate को उसकी default पर छोड़ना और element के upright रहने की उम्मीद करना, जबकि auto rotation ही वह चीज़ है जो इसे curve को naturally follow कराती है।
  3. गलत coordinate space वाली एक SVG path string इस्तेमाल करना, जिससे element visible viewport से बाहर travel करता है।
चैप्टर सारांश
  • offset-path वह invisible track (एक shape, ray, या SVG path) define करता है जिस पर कोई element travel करता है।
  • offset-distance control करता है कि element उस track पर इस समय कितनी दूर बैठा है, और smooth motion के लिए animate किया जा सकता है।
  • offset-rotate और offset-anchor path के साथ move करते समय element की orientation और pivot point को fine-tune करते हैं।
ब्राउज़र सपोर्ट

CSS Motion Path (offset-path, offset-distance, offset-rotate) हर modern Chromium और Firefox browsers में supported है; complex path shapes के लिए Safari support ज़्यादा limited है।

🔒

Chapter Quiz — Complete all 25 topics to unlock

0/25 topics done

Complete these topics first:

← Previous Lesson CSS Math Functions Next Lesson → CSS @supports

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.