خصائص موقع التحريك لـ CSS

التعريف والاستخدام

وظيفة offset-position يحدد الموقع الأولي للعنصر في المسار.

إذا path-offset إذا لم يتم تحديد موقع البداية الخاصة بها بنفسها، وظيفة offset-position يحدد القيمة الموقع الأولي للعنصر أثناء تحركه على مسار التحريك.

مثال

مثال 1

الموقع الأولي للعنصر المحدد يجب أن يكون في الزاوية السفلية اليمنى：

#square {
  width: 60px;
  height: 60px;
  background: blue;
  offset-position: bottom right;
  offset-path: ray(45deg);
}

جرب بنفسك

مثال 2

رؤية مواقع البداية المختلفة للتحرك:

#square1 {
  width: 40px;
  height: 40px;
  background: pink;
  text-align:center;
  offset-position: bottom right;
  offset-path: ray(45deg);
}
#square2 {
  width: 40px;
  height: 40px;
  background: red;
  text-align:center;
  offset-position: top right;
  offset-path: ray(25deg);
}
#square3 {
  width: 40px;
  height: 40px;
  background: yellow;
  text-align:center;
  offset-position: normal;
  offset-path: ray(45deg);
}
#square4 {
  width: 40px;
  height: 40px;
  background: cyan;
  text-align:center;
  offset-position: auto;
  offset-path: ray(95deg);
}
#square5 {
  width: 40px;
  height: 40px;
  background: lavender;
  text-align:center;
  offset-position: 30% 70%;
  offset-path: ray(120deg);
}

جرب بنفسك

جملة CSS

offset-position: auto|normal|position|initial|inherit;

قيمة الخاصية

تفاصيل التقنية

دعم المتصفح

الرقم في الجدول يمثل إصدار المتصفح الذي يدعم الخاصية لأول مرة.

الصفحات ذات الصلة

دروس:مسار SVG

دروس:رسوميات CSS

المرجع:خصائص التحرير لـ CSS

المرجع:خصائص نقطة التحريك لـ CSS

المرجع:خصائص المسافة التحريكية لـ CSS

المرجع:خصائص مسار التحريك لـ CSS

المرجع:خصائص دوران التحريك لـ CSS