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

اگه تا حالا سعی کردی سرعت یه انیمیشن CSS در حال اجرا رو تغییر بدی، احتمالاً با یه پرش ناخواسته روبرو شدی — المان یه‌دفعه می‌پره یه جای دیگه و بعد با سرعت جدید ادامه می‌ده. این رفتار by design هست و نشون می‌ده که دستکاری مقادیر انیمیشن در حین اجرا ایده خوبی نیست.

راه‌حل: animation-composition: add

ویژگی animation-composition مشخص می‌کنه وقتی چند انیمیشن روی یه property یکسان اثر می‌ذارن، چطور با هم ترکیب بشن. مقدار add یعنی اثر انیمیشن‌ها روی هم جمع می‌شن. با این ترفند می‌شه همون انیمیشن رو دو بار تعریف کرد — یکی در حال اجرا و یکی متوقف — تا با فعال شدن دومی، سرعت کل دو برابر بشه.

.box {
  animation: 
   rotate 5s linear infinite,
   rotate 5s linear infinite paused;
  animation-composition: add;
}
.box:hover {
  animation-play-state: running;
}

در این مثال، هنگام hover هر دو انیمیشن روی هم جمع می‌شن و نتیجه‌ای معادل duration: 2.5s یا rotate: 2turn به دست میاد — ولی بدون هیچ پرش بصری.

برای اینکه این سیستم انعطاف‌پذیرتر بشه، می‌شه از CSS Variables استفاده کرد. با تعریف متغیرهایی مثل --d برای duration و --s برای ضریب سرعت، می‌شه تعداد انیمیشن‌های همزمان رو به‌صورت داینامیک کنترل کرد و در نتیجه سرعت نهایی رو دقیقاً تنظیم نمود — همه اینا بدون دست زدن به keyframe ها در حین اجرا.

نکات کلیدی:

• تغییر animation-duration یا keyframe ها در حین اجرای انیمیشن باعث پرش ناخواسته المان می‌شه
• animation-composition: add به چند انیمیشن روی یه property اجازه می‌ده روی هم انباشته بشن
• اجرای همزمان دو انیمیشن یکسان با این روش، معادل نصف کردن duration یا دو برابر کردن مقدار keyframe هست
• استفاده از CSS Variables کنترل سرعت رو انعطاف‌پذیر و قابل‌توسعه می‌کنه
• تنها راه امن برای توقف فوری انیمیشن، animation-play-state: paused هست