‏حرکت تصادفی روی لبهٔ باکس با CSS خالص

شروع ماجرا یه انیمیشن بامزه بوده: یه خرچنگ کوچیک که روی لبهٔ بالای یه باکس راه می‌ره. نویسنده می‌گه این کار یاد یه ترکیب CSS موردعلاقه‌ش انداختش. معمولاً فکر می‌کنیم offset-path (یعنی مسیری که المان روش می‌شینه و حرکت می‌کنه) باید با path() یا rect() دستی ساخته بشه، ولی می‌تونی فقط بنویسی border-box تا خود حاشیهٔ المان والد بشه مسیر. خوبیش اینه که مقدار پیکسلی ثابت نمی‌نویسی، پس با تغییر اندازهٔ باکس همه‌چی سر جاش می‌مونه.

برای گذاشتن یه دایرهٔ ساده روی این مسیر، همین چند خط کار رو تموم می‌کنه:

.circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  offset-path: border-box;
  offset-distance: 20%;
}

مقدار offset-distance می‌گه المان چند درصدِ مسیر جلو رفته باشه.

قسمت جذاب‌تر وقتیه که بخوای موقعیت تصادفی بدی. Safari تابع random() رو داره و تو Chrome پشت فلگ Experimental Web Features هست. نویسنده می‌گه اول انتظار داشته تو هر کی‌فریم یه random(0%, 100%) ساده بذاره و کار کنه، ولی نشد و همهٔ کی‌فریم‌ها یه مقدار گرفتن، حتی بدون اینکه کلیدواژهٔ element-shared رو نوشته باشه. راه‌حلش این بوده که به هر فراخوانی یه seed جدا بده:

@keyframes moveCircle {
  0%   { offset-distance: random(--k1, 0%, 200%); }
  25%  { offset-distance: random(--k2, 0%, 200%); }
  50%  { offset-distance: random(--k3, 0%, 200%); }
  75%  { offset-distance: random(--k4, 0%, 200%); }
  100% { offset-distance: random(--k5, 0%, 200%); }
}

با animation: moveCircle 25s infinite alternate ease-in-out دایره بین این نقطه‌ها می‌ره و میاد. اگه فقط لبهٔ بالا رو می‌خوای، بازهٔ تصادفی رو تا ۲۵٪ محدود کن. تو مرورگری که random() رو نداره مقدار نادیده گرفته می‌شه و هیچ حرکتی نمی‌بینی، پس نویسنده می‌گه اگه جدی می‌خوای بفرستیش روی پروداکشن، با @supports یه فالبک با مقدارهای ثابت یا ساخته‌شده با جاوااسکریپت بذار.

نویسنده بعدش چندتا نمونهٔ دیگه ساخته: به‌جای border واقعی، با outline و box-shadow یه ریل درست کرده و دایره رو مثل یه گلولهٔ نورانی توش برده، بعد همون حرکت رو روی یه سایهٔ بزرگ و بعد چندتا المان با ریتم‌های مختلف امتحان کرده. آخرش هم جای خرچنگ یه سگ ساخته که از چندتا دایرهٔ انیمیت‌شده تشکیل شده، ولی می‌گه ایدهٔ اصلی همونه. برای چرخوندن جهت سگ و دقیق‌تر کردن موقعیت هم ترجیح داده یه تیکه جاوااسکریپت کوچیک بنویسه.

نکات کلیدی:

• offset-path: border-box خود حاشیهٔ المان والد رو مسیر می‌کنه، بدون path() یا rect() دستی
• چون مقدار پیکسلی ثابت نداره، با تغییر اندازهٔ باکس هم درست می‌مونه
• تابع random() الان تو Safari هست و تو Chrome پشت فلگ Experimental Web Features
• چند random() بدون seed تو یه @keyframes همه یه مقدار می‌گیرن، راه‌حلش seed جدا مثل --k1 تا --k5 هست
• محدود کردن بازه تا ۲۵٪ حرکت رو فقط روی لبهٔ بالا نگه می‌داره
• تو مرورگر بدون پشتیبانی مقدار نادیده گرفته می‌شه، پس فالبک با @supports لازمه