اگه با CSS کار می‌کنی، احتمالاً تا حالا به این فکر کردی که بشه رنگ‌ها رو نرم و قشنگ انیمیت کرد، مثلاً پس‌زمینه کم‌کم از یه رنگ به یه رنگ دیگه بره، بدون اینکه چشم اذیت بشه.
خب، خبر خوب اینه که از وقتی ویژگی @property اومده، این کار بالاخره شدنی شده!
قبلاً انیمیت کردن رنگ در CSS (مخصوصاً وقتی از CSS Variables استفاده می‌کردی) یه دردسر واقعی بود، ولی حالا با یه ویژگی کوچیک، دنیای CSS مدرن یه مرحله حرفه‌ای‌تر شده.
قبلاً چه مشکلی داشتیم؟
فرض کن یه متغیر داشتی به اسم --main-color و می‌خواستی باهاش رنگ پس‌زمینه یا دکمه رو تغییر بدی.
مشکل این بود که مرورگر نمی‌دونست این متغیر دقیقاً چیه. رنگه؟ عدده؟ طول پیکسله؟
نتیجه؟ انیمیشن نمی‌تونست بین دو رنگ حرکت کنه، فقط یهویی از یه رنگ به اون یکی می‌پرید 😬
حالا @property اومده چی کار می‌کنه؟
خیلی خلاصه: با @property می‌تونی به مرورگر بگی که فلان متغیر از چه نوعیه.
مثلاً بگی «آقا این یه رنگه، لطفاً باهاش مثل یه رنگ واقعی رفتار کن!» 🎨
وقتی مرورگر بدونه نوع متغیر چیه، می‌تونه تغییرش رو انیمیت کنه — یعنی رنگ‌ها کم‌کم از یه حالت به حالت دیگه برن.
بدون جاوااسکریپت، بدون ترفند، فقط با CSS خالص.
چند تا کاربرد باحال
-
تغییر رنگ اصلی برند (Theme Color):
فرض کن سایتت شب و روز داره، رنگ‌هاش هم با زمان عوض می‌شن. خیلی حرفه‌ای! -
گرادینت‌های زنده:
اون پس‌زمینه‌هایی که انگار نفس می‌کشن 😍 — با@propertyخیلی راحت‌تر ساخته می‌شن. -
انیمیت کردن هرچی عددی یا رنگیه:
حتی می‌تونی اندازه، شفافیت یا هر خاصیت عددی دیگه رو هم انیمیت کنی.
مرورگرها پشتیبانی می‌کنن؟
آره دیگه!
الان تقریباً همه مرورگرهای مدرن مثل کروم، فایرفاکس و سافاری از @property پشتیبانی می‌کنن.
یعنی وقتشه ازش تو پروژه‌هات استفاده کنی بدون اینکه نگران سازگاری باشی.
جمع‌بندی — چرا باید @property رو بلد باشی؟
چون اگه بخوای طراحی‌هات مدرن، تمیز و پویا باشن، این ویژگی بهت کمک می‌کنه یه سر و گردن از بقیه جلوتر باشی.
خیلی از افکت‌هایی که قبلاً باید با جاوااسکریپت می‌ساختی، الان فقط با CSS شدنی‌ان.
و اگه می‌خوای به‌صورت عمیق‌تر این قابلیت‌ها و کلی تکنیک دیگه رو یاد بگیری،
توی دوره‌ی پیشرفته CSS در کلاسبن مفصل در موردش صحبت کردیم.
از انیمیشن‌های حرفه‌ای CSS گرفته تا layoutهای مدرن، متغیرها، motion design و کلی نکته‌ی کاربردی که باعث می‌شه کدت مثل یه طراح واقعی بدرخشه ✨
CSS پیشرفته، آموزش CSS، آموزش انیمیشن در CSS، انیمیت کردن رنگ در CSS، ویژگی @property، آموزش طراحی مدرن، گرادینت CSS، متغیرهای CSS، انیمیشن رنگ، سایت کلاسبن
CSS property, CSS color animation, CSS variables, CSS gradients, advanced CSS, CSS animation, frontend course, modern CSS