هممون وقتی به وب سایت های بزرگان تکنولوژی مثل اپل یا مایکروسافت یا شرکت هایی مثل تسلا و مرسدس نگاه می کنیم شگفت زده میشیم. عامل مهمی که شاید باعث برجسته شدن این وب سایت ها میشه انیمیشن ها و جلوه های جذابیه که باعث میشه دلمون بخواد این وب سایت ها رو بارها و بارها نگاه کنیم. خوب، چطوری اونا یه همچین وب سایت هایی با این انیمیشن های شگفت انگیز میسازن؟ تا حالا براتون سوال پیش اومده که انیمیشن های این سایت ها چطوری ساخته شدن؟ و یا دلتون خواسته یه همچین وب سایت های تعاملی زیبا و چشم نوازی برای خودتون یا کسب و کارتون بسازید؟ اگر جوابتون مثبته که این مطلب رو واسه شما آماده کردم. بخونید و اگر دوست داشتید منو فالو کنید. تو این مقاله سعی کردم به طور مختصر و مفید اما کامل و گسترده اصول انیمیشن ها با css رو آموزش بدم که خیلی می تونه بهتون تو این زمینه کمک کنه. اگر تازه وارد حوزه برنامه نویسی فرانت اند شدید و یا می خواید دانشتون رو در زمینه انیمیشن های سی اس اس بیشتر کنید، پس به خوندن این مطلب ادامه بدید، چون در آخر یه درک کاملی از سی اس اس بدست میارید. همون طور که شاید خیلی هاتون بدونید قسمت زیبای اپلیکیشن های وبه، یعنی استراکچر و اسکلت وب سایت که همون باشه رو با بهش یه رنگ و لعابی میدیم. نقش مهمی تو بهتر کردن تجربه کاربری ( UX ) بازی می کنن جوری که باعث میشن کاربر درک بهتری از نحوه عملکرد وب سایت پیدا کنه و راحت تر باهاش ارتباط بگیره و یه تجربه خوشایندی رو براش میسازه. ولی انیمیشن باید خیلی هوشمندانه استفاده بشه وگرنه ممکنه در نهایت یه پیجی داشته باشید که بیشتر حواس پرت کنه تا تعاملی و کاربردی. مطابق گزارش گوگل، تقریبا درصد ترافیک وب از دستگاهای موبایل میاد، در نتیجه هر بیزینسی نیاز داره که انیمیشن های سازگار با موبایل تو وبسایتش داشته باشه. برای آموزش رایگان به این لینک برید: انیمیشن های css ای سه جنبه مهم دارن: این پراپرتی کمک میکنه عناصر وبتون رو به روش های شگف انگیزی تغییر بدید، از حرکت دادن تا تغییر سایز دادنش، از چرخوندن تا کج کردنش. شما می تونید هر چیزی رو بدون تغییر جریان داکیومنت - document flow - دستکاریش کنید. این پراپرتی - transforms - چهار جنبه قابل توجه داره: Translate Scale Rotate Skew بزارید یکم عمیق تر شیم: . Translate ترنسلیت مختصات یه المان رو تغییر میده. برای تغییر ظاهر یه کامپوننت تو سطح دوبعدی به کار میره. ترنسلیت خیلی ساده یعنی یه المان صفحمون رو از یه موقعیت به موقعیت دیگه حرکتش بدیم. می تونید یه شی رو تو مختصات x , y جابه جا کنید. حرکت المان رو محور x حرکت المان رو محور y مختصر نویسی: مثال: این دستور فقط تو محور x حرکت میده المانتون رو . Scale با scale سایز المان ها رو تغییر میدیم هم تو محور x و هم تو محور y ویا هر دو. تو استقاده از این المان هم باید حواستون باشه که بیش از اندازه اگر سایز المان هارو تغییر بدید شکلشون مخدوش میشه و کیفیتشون کم میشه. یه عددی بالاتر از ، سایز رو افزایش میده و یه عددی کمتر از سایز اونو کاهش میده، یعنی حالت عادی و سایز عادی یه المان برابر هست و به طور نسبی میشه این سایز رو تغییر داد. تغییر ابعاد در محور x : تغییر ابعاد در محور y : مختصر نویسی برای تغییر ابعاد در محور x و y : . Rotate می تونید با rotate یه المانی رو هم در جهت حرکت عقربه های ساعت و هم خلاف عقربه های ساعت واحد اندازه گیری این چرخش بر اساس درجه‌ست. یه مقدار مثبت المان رو در جهت حرکت عقربه های ساعت می چرخونه و یه مقدار منفی برعکس می چرخوندش. این چرخش میتونه در امتداد محورهای x ، y و z انجام بشه. درک چرخوندن المان ها بوسیله روتیت ( rotate ) یکم گیج کننده می تونه باشه، واسه همین خیلیا به درستی نمی تونن از این قابلیت استفاده کنن. چرخش در محور x : باید تو ذهنتون تصویر سازی کنید تا بتونید اونو توی محورهای مختلف بچرخونید، چرخوندن تو محور x مثل چرخوندن یه سیخ کباب یا یه سیب زمینی رو آتیشه، ما یه چرخش سه بعدی رو که نمیبینیم تنها چیزی که می تونیم ببینیم تغییر ارتفاع المانمونه که این چرخش رو برامون تداعی میکنه. چرخش در محور y : یه کباب ترکی یا یه رقصنده رو میله رو تجسم کنید (نه اونقدر حالا) چرخش رو محور y همینطوریه همه چیزی که متوجه میشید تغییر عرض المانتونه که چرخش در محور y رو براتون تداعی میکنه. چرخش در محور z : تصور کنید یه نیزه داره میره تو صفحتون و نیزه در حال چرخشه، این در اصل بهترین جهت برای چرخوندن المان هاست برای اینکه با چرخشش در جهت عقربه های ساعت و یا برعکس به راحتی می تونید متوجه تغییر جهت چرخشتون بشید. منو تو کانال های زیر رو فالو کنید: اینستاگرام: تلگرام: یوتیوب: . Skew با این قابلیت می تونید المان هاتون رو کج کنید. هم مقدار مثبت میگیره هم منفی، و مثل روتیت (چرخش) واحد اندازه گیریش درجه‌ست. مقدار مثبت x ، المان رو به چپ کج میکنه و مقدار منفی x ، برعکسشه. و همینطور تغییر مقدار y اونو به بالا و پایین کج میکنه. در جهت x : درجهت y : . ترکیب کردن transform ها خیلی راحت میشه چندین نوع transform رو همزمان اعمال کرد. ترتیب مهمه (بعضی مواقع) طوری که دومین تغییر ترنسفورم روی اولین تغییر اعمال میشه و سومی روی نتیجه تغییر دوتای اول اعمال میشه. همه این تغییر ترنسفورم ها روی یه رویدادی که توسط کاربر انجام میشه مثل با موس رفتن روی یه المان ( hover ) ، کلیک کردنش، فوکوس کردن روش، اکتیو و. برای اینکه این جادو رو در عمل بتونید ببینی، می تونید این تغییر ترنسفورم ها رو به این رویداد ها اضافه کنید. قسمت دوم: ترنزیشنز ( Transitions ) اگه قسمت بالا رو خونده باشید و کار کرده باشید، ممکن تو حالت هاور ( hover ) متوجه یه حرکت غیرعادی شده باشید. این دقیقا همون کاریه که ترنزیشن انجام میده. ترنزیشن ها ( transitions ) به سیال و رون شدن انیمیشن ها کمک میکنن. . transition - property با این ویژگی می تونید مشخص کنید که ترنزیشنتون رو کدوم ویژگی css ای اعمال بشه. مثلا می خواید این ترنزیشن روی مارجین و پدینگ اعمال بشه یا بک گراند و یا بردر و. پس شما می تونید یه ترنزیشن رو به یه ویژگی و یا تمام ویژگی های اون المان اعمال کنید (البته ویژگی هایی که میشه بهشون ترنزیشن داد) یه لیست کامل از ویژگی هایی که جز این لیست می تونن باشن رو می تونید پیدا کنید. اعمال کردن ترنزیشن به یه ویژگی خاص CSS : اعمال یه ترنزیشن به کل لیست ویژگی های CSS المانمون: . transition - duration مدت زمانی که انیمیشن اجرا میشه. براحتی میتونه با ثانیه یا میلی ثانیه مقدار دهی بشه. پیشنهاد میکنم که از ثانیه استفاده کنید چون وقتی می خونیدش راحتتر درکش میکنید که چقدر انیمیشنتون طول میکشه. . transition - timing - function سرعت چیزیه که میتونه باعث ساخت یه تجربه کاربری خوب بشه یا اونو از بین ببره، پس پیشنهاد میکنم کنترلش کنید. اینو از طریق transition - timing - function می تونید اعمال کنید. خود CSS چنتا مقدار از پیش تعریف شده داره که اونارو می تونیم برای کنترل سرعتمون استفاده کنیم مثل: و اگه دوست دارید کنترل سرعت رو به طور کامل دست خودتون بگیرید از استفاده کنید . transition - delay با این می تونید یه وقفه ای بین اون رویدادی که انیمیشنتون رو شروع میکنه و زمان شروع واقعی انیمیشنتون بدید، یعنی به زبان ساده با این می تونید مشخص کنید که انیمیشنتون چقدر طول بکشه که شروع بشه و با مقادیر ثانیه و میلی ثانیه مقدار دهی میشه: اینجوری همه رو میشه یه جا تعریف کرد: استفاده همزمان از Transforms و Transitions برای ترنزیشن بین وضعیت اول و دوم هم میشه به صورت جدا واسه همه پراپرتی ها با مقدارهای زمانی متفاوت مقدار دهی کرد هم میشه یه چیز کلی واسه همشون مقداردهی کرد مثلا اینطوری: قسمت سوم: فریم‌های کلیدی ( keyframes ) کی فریمز ها ( keyframes ) به تغییر انیمیشن از یک نقطه زمانی به نقطه زمانی دیگه کاربرد دارن. به دو روش میشه با فریم های کلیدی کار کرد: - روش از ( From ) - به ( to ) - روش درصدی - روش از ( From ) - به ( to ) تو این روش فقط دوتا وضعیت در طول انیمیشن داریم - وضعیت شروع ( from ) و وضعیت پایان ( to ) برای انیمیشن دادن به یه المان (مثلا یه ماشین) که به طور افقی از وضعیت ابتداییش حرکت میکنه: - روش درصدی در حال حاضر برای انیمیشن هایی که بیشتر از دو وضعیت (شروع و پایان) دارن نمی تونیم از From - to استفاده کنیم. واسه انیمیشن هایی که بیشتر از دو وضعیت دارن از روش درصدی استفاده میکنیم. رویه درصدی انیمیشن رو به وضعیت های میانی متعدد همراه با وضعیت شروع و پایان تقسیم میکنه. وضعیت شروع با . هرچقدر هم که بخواید وضعیت میانی میتونید داشته باشید. مثال: تاخیر انیمیشن ( animation - delay ) همیشه بعد از زمان انیمیشن ( animation - duration ) میاد. مثال: خوب الان دوتا انیمیشن داریم - drive و jump ، که می خوایم به المان اضافش کنیم. اینکارو تو یه خط میتونیم انجامیش بدیم با استفاده از، زنجیره انیمیشن" Chaining Animations " زنجیره انیمیشن" Chaining Animations " چیه؟ اجرای چنتا انیمیشن با CSS خیلی راحته، با قرار دادن یه کاما ( بین انیمیشن ها میشه اونارو یکی بعد از دیگری اجرا کرد. مثل: دسته بندی پراپرتی های انیمیشن ( Animation Properties ) : اسم انیمیشن که بعد از کلمه کلیدی اومده رو بهش نسبت میدیم. وقتی انیمیشن از پنجره انیمیشن خارج شد چی کار کن. تعداد دفعاتی که می خواید انیمیشن تکرار بشه رو بدید بهش. میتونه یه عدد باشه یا اگر می خواید مدام تکرار بشه از مقدار" infinite " استفاده کنید. لازم نیست یه انیمیشن جدا بنویسید واسش تنها کاری که باید بکنید اینه که به این ویژگی مقدار دهی کنید. تو روش From - to تو روش درصدی جمع بندی می تونه واسه شروع کار با انیمیشن ها تو css یکم پیچیده بنظر بیاد ولی همین که یکم باهاش کار میکنید می بینید که خیلی هم راحته و هیجان انگیز. مرسی که تا اینجا با من بودید و وقت گذاشتید. امیدوارم که این مطلب بدردتون بخوره و اگر اینطور بود حتما این مقاله رو لایک کنید و منو هم اینجا هم تو شبکه های اجتماعی فالو کنید: اینستاگرام: تلگرام: یوتیوب: