‏با animation-composition مقدارها رو دوباره ننویس

پرکتی سم تو این مقاله از یه مشکل آشنای CSS شروع می‌کنه: اگه چند @keyframes روی یه المان اجرا بشن و همه‌شون transform رو تغییر بدن، آخری همیشه اعلان‌های قبلی رو کامل پاک می‌کنه. با پراپرتی animation-composition می‌شه این transformها رو با هم ترکیب کرد؛ مثلاً المان رو تو یه کی‌فریم با translate() به چپ برد و تو یکی دیگه به پایین، در حالی که جابه‌جایی افقی قبلی حفظ می‌شه.

ولی به گفتهٔ نویسنده، کار این پراپرتی خیلی خاص‌تر از فقط ترنسفورمه: مقدار جدید رو به یه جفت پراپرتی-مقدارِ ازپیش‌موجود اضافه می‌کنه. فرض کن المانی چند تا box-shadow داره و با تعامل کاربر باید یه سایهٔ دیگه هم بهش اضافه بشه. راه کلاسیک اینه که موقع تعامل همهٔ سایه‌ها — قبلی‌ها و جدید — دوباره نوشته بشن، یا لااقل مقدارهای اولیه تو یه متغیر ذخیره و تو هر دو حالت استفاده بشن. نویسنده می‌گه متغیرها کار رو راحت می‌کنن ولی خوندن چشمیِ استایل‌شیت رو سخت‌تر.

مثالش یه گرید از تصویرهای پوکمونه که هرکدوم یه سایهٔ داخلی با رنگ متفاوت دارن. با تیک‌خوردن یه چک‌باکس، پوکمون‌های نوع سمی باید دو حلقهٔ اضافه (یکی داخلی و یکی بیرونی) بگیرن. حلقه‌های اضافه تو یه کی‌فریم اعلام می‌شن:

@keyframes focus-rings {
  to {
    box-shadow: 0 0 0 7px white, 0 0 0 8px grey, inset 0 0 0 2px rgb(241, 52, 90);
  }
}

و بعد همون کی‌فریم با animation-composition: add روی المان‌های انتخاب‌شده اعمال می‌شه:

body:has(#isPoisonous:checked) .pokemon[data-type="poisonous"] {
  animation: focus-rings 0.3s forwards;
  animation-composition: add;
}

وقتی add رو می‌ذاری، مرورگر مقدار اولیه و مقدار تازه‌واردِ پراپرتی انیمیت‌شده رو به هم زنجیر می‌کنه و لایه‌لایه روی هم می‌ذاره — یعنی سایه‌های کی‌فریم به سایه‌ای که از قبل هست وصل می‌شن. این روش برای بیشتر پراپرتی‌های لیستیِ CSS مثل filter و text-shadow هم جواب می‌ده.

مقدار دوم، accumulate ـه که برخلاف add مقدارها رو لایه نمی‌کنه بلکه با حساب‌وکتابِ مربوط ترکیب‌شون می‌کنه؛ مثلاً مقدارهای aspect-ratio در هم ضرب می‌شن. نویسنده هم اشاره می‌کنه که تا جولای ۲۰۲۶ یه باگ احتمالی تو فایرفاکس جلوی این ترکیب نسبت ابعاد رو می‌گیره. جمع‌بندی‌اش اینه که اگه از انیمیشن، ترنزیشن یا کی‌فریم استفاده می‌کنی و مجبوری مقدارها رو دوباره اعلام کنی، سراغ animation-composition برو: فقط چیزی که باید اضافه بشه رو بنویس و لایه‌چینی رو به مرورگر بسپار.

نکات کلیدی:

• بدون این پراپرتی، انیمیشن بعدی مقدار قبلیِ همون پراپرتی رو کامل پاک می‌کنه
• add مقدار جدید رو به مقدار موجود زنجیر می‌کنه؛ نیازی به بازنویسی یا متغیر نیست
• accumulate مقدارها رو با محاسبه ترکیب می‌کنه (مثل ضرب شدن aspect-ratio)
• روی پراپرتی‌های لیستی مثل box-shadow، filter و text-shadow کاربردیه
• تا جولای ۲۰۲۶ یه باگ احتمالی فایرفاکس مانع ترکیب aspect-ratio می‌شه