‏کنترل انیمیشن‌های بی‌نهایت CSS با شروع و توقف نرم

ایده اصلی این تکنیک روی یک اصل ساده بنا شده: وقتی روی یک المان hover می‌کنی، هم‌زمان دو چیز اتفاق می‌افته — انیمیشن بی‌نهایت شروع به اجرا می‌کنه، و یک transition در جهت مخالف فعال می‌شه. این دو با هم یک افکت additive می‌سازن که حس شتاب‌گیری تدریجی رو شبیه‌سازی می‌کنه. وقتی هم hover رو برمی‌داری، انیمیشن متوقف می‌شه و transition برعکس اجرا می‌کنه تا توقف نرم داشته باشیم.

.box {
  animation: rotate 2s linear infinite paused;
  transition: transform 1s ease-out;
}
.box:hover {
  animation-play-state: running;
  transform: rotate(-.2turn);
}
@keyframes rotate {
  to { rotate: 1turn; }
}

این کد از این استفاده می‌کنه که چرخش رو می‌شه هم با transform و هم با rotate تعریف کرد و مرورگر این دو رو با هم جمع می‌زنه. برای خواص دیگه‌ای که این امکان رو ندارن، می‌شه از متغیرهای CSS کمک گرفت: مقدار مورد نظر رو به‌صورت جمع دو متغیر --a و --b تعریف کنیم، یکی رو با animation و دیگری رو با transition کنترل کنیم. این روش جنریک‌تره و برای هر خاصیتی مثل زاویه گرادیان یا موقعیت المان‌ها کار می‌کنه، به‌شرطی که متغیرها با @property ثبت شده باشن.

برای کنترل موقعیت توقف انیمیشن، نویسنده از یک رویکرد متفاوت استفاده می‌کنه: به‌جای @keyframes، انیمیشن بی‌نهایت با @starting-style شبیه‌سازی می‌شه. متغیر --a مقدار اولیه -100turn داره، اما @starting-style اون رو از 0turn شروع می‌کنه. این باعث می‌شه یک transition بلند‌مدت ایجاد بشه که به‌نظر انیمیشن بی‌نهایت می‌رسه — مثلاً ۱۰۰ دور در ۲۰۰ ثانیه.

برای اینکه روی hover المان همیشه به موقعیت 0 برگرده، یک متغیر کمکی --i اضافه می‌شه. فرمول چرخش calc(mod(var(--a), 1turn) * var(--i)) می‌شه. وقتی --i از 1 به 0 می‌ره (با transition نرم)، چرخش به 0turn می‌رسه. سپس با تأخیر، --a هم صفر می‌شه تا وقتی hover برداشته شد، انیمیشن از ابتدا شروع کنه.

.box:hover {
  --i: 0;
  --a: 0turn;
  transition: --i .8s ease-out, --a 0s .8s;
}

آخرین افکت توقف با کوتاه‌ترین مسیر است. اگه المان در 0.3turn باشه، باید به سمت جلو بره تا به 0 برسه. ولی اگه در 0.7turn باشه، برگشت به عقب (-0.3turn) کوتاه‌تره. برای این کار فرمول چرخش با sign() و mod() تغییر می‌کنه تا زوایای بالای 0.5turn به معادل منفی‌شون تبدیل بشن و مرورگر کوتاه‌ترین مسیر رو طی کنه.

نکات کلیدی:

• ترکیب animation و transition روی یک المان افکت شروع/توقف نرم می‌سازه
• خواص transform و rotate در CSS با هم جمع می‌شن و این پایه تکنیک additive‌ست
• برای خواص دیگه می‌شه با دو متغیر CSS و @property همین کار رو کرد
• @starting-style می‌تونه جای @keyframes رو برای انیمیشن‌های شبه‌بی‌نهایت بگیره
• متغیر --i با ضرب در فرمول چرخش، کنترل توقف روی موقعیت خاص رو ممکن می‌کنه
• تابع‌های mod() و sign() برای پیاده‌سازی توقف با کوتاه‌ترین مسیر استفاده می‌شن