آموزش کاربردی ساخت انیمیشن با سی اس اس (animation with css)

هممون وقتی به وب سایت های بزرگان تکنولوژی مثل اپل یا مایکروسافت یا شرکت هایی مثل تسلا و مرسدس نگاه می کنیم شگفت زده میشیم.

عامل مهمی که شاید باعث برجسته شدن این وب سایت ها میشه انیمیشن ها و جلوه های جذابیه که باعث میشه دلمون بخواد این وب سایت ها رو بارها و بارها نگاه کنیم.

خوب، چطوری اونا یه همچین وب سایت هایی با این انیمیشن های شگفت انگیز میسازن؟ تا حالا براتون سوال پیش اومده که انیمیشن های این سایت ها چطوری ساخته شدن؟ و یا دلتون خواسته یه همچین وب سایت های تعاملی زیبا و چشم نوازی برای خودتون یا کسب و کارتون بسازید؟

اگر جوابتون مثبته که این مطلب رو واسه شما آماده کردم. بخونید و اگر دوست داشتید منو فالو کنید.

تو این مقاله سعی کردم به طور مختصر و مفید اما کامل و گسترده اصول انیمیشن ها با css رو آموزش بدم که خیلی می تونه بهتون تو این زمینه کمک کنه.

اگر تازه وارد حوزه برنامه نویسی فرانت اند شدید و یا می خواید دانشتون رو در زمینه انیمیشن های سی اس اس بیشتر کنید، پس به خوندن این مطلب ادامه بدید، چون در آخر یه درک کاملی از سی اس اس بدست میارید.

سی اس اس همون طور که شاید خیلی هاتون بدونید قسمت زیبای اپلیکیشن های وبه، یعنی استراکچر و اسکلت وب سایت که همون HTML باشه رو با CSS بهش یه رنگ و لعابی میدیم.

انیمیشن ها نقش مهمی تو بهتر کردن تجربه کاربری(UX) بازی می کنن جوری که باعث میشن کاربر درک بهتری از نحوه عملکرد وب سایت پیدا کنه و راحت تر باهاش ارتباط بگیره و یه تجربه خوشایندی رو براش میسازه.

ولی انیمیشن باید خیلی هوشمندانه استفاده بشه وگرنه ممکنه در نهایت یه پیجی داشته باشید که بیشتر حواس پرت کنه تا تعاملی و کاربردی.

مطابق گزارش گوگل، تقریبا 50 درصد ترافیک وب از دستگاهای موبایل میاد، در نتیجه هر بیزینسی نیاز داره که انیمیشن های سازگار با موبایل تو وبسایتش داشته باشه.

برای آموزش رایگان به این لینک برید:

کانال یوتیوب yasharhabibimedia

انیمیشن های cssای سه جنبه مهم دارن:

• Transforms
• Transitions
• Keyframes

قسمت اول: ترنسفورمز(Transforms)

این پراپرتی کمک میکنه عناصر وبتون رو به روش های شگف انگیزی تغییر بدید، از حرکت دادن تا تغییر سایز دادنش، از چرخوندن تا کج کردنش.

و بهترین قسمت: شما می تونید هر چیزی رو بدون تغییر جریان داکیومنت - document flow - دستکاریش کنید.

این پراپرتی- transforms - چهار جنبه قابل توجه داره:

1. Translate
2. Scale
3. Rotate
4. Skew

بزارید یکم عمیق تر شیم:

1. Translate

ترنسلیت مختصات یه المان رو تغییر میده. برای تغییر ظاهر یه کامپوننت تو سطح دوبعدی به کار میره.

ترنسلیت خیلی ساده یعنی یه المان صفحمون رو از یه موقعیت به موقعیت دیگه حرکتش بدیم. می تونید یه شئ رو تو مختصات x , y جابه جا کنید.

حرکت المان رو محور x

 transform: translateX(200px); 

 transform: translateX(-200px);

حرکت المان رو محور y

transform: translateY(200px); 

transform: translateY(-200px);

مختصر نویسی:

transform: translate(x-axis, y-axis)

مثال:

 transform: translate(200px, 200px);

نکته

translate(200px);

این دستور فقط تو محور x حرکت میده المانتون رو

1. Scale

با scale سایز المان ها رو تغییر میدیم هم تو محور x و هم تو محور y ویا هر دو. تو استقاده از این المان هم باید حواستون باشه که بیش از اندازه اگر سایز المان هارو تغییر بدید شکلشون مخدوش میشه و کیفیتشون کم میشه. یه عددی بالاتر از 1، سایز رو افزایش میده و یه عددی کمتر از 1 سایز اونو کاهش میده، یعنی حالت عادی و سایز عادی یه المان برابر 1 هست و به طور نسبی میشه این سایز رو تغییر داد.

تغییر ابعاد در محور x:

 transform: scaleX(3);

تغییر ابعاد در محور y:

transform: scaleY(0.5);

مختصر نویسی برای تغییر ابعاد در محور x و y:

transform: scale(3 , 0.5); 

 transform: scale(0.5);

3. Rotate

می تونید با rotate یه المانی رو هم در جهت حرکت عقربه های ساعت و هم خلاف عقربه های ساعت بچرخونید. واحد اندازه گیری این چرخش بر اساس درجه‌ست. یه مقدار مثبت المان رو در جهت حرکت عقربه های ساعت می چرخونه و یه مقدار منفی برعکس می چرخوندش. این چرخش میتونه در امتداد محورهای x ، y و z انجام بشه.

درک چرخوندن المان ها بوسیله روتیت(rotate) یکم گیج کننده می تونه باشه، واسه همین خیلیا به درستی نمی تونن از این قابلیت استفاده کنن.

چرخش در محور x:

باید تو ذهنتون تصویر سازی کنید تا بتونید اونو توی محورهای مختلف بچرخونید، چرخوندن تو محور x مثل چرخوندن یه سیخ کباب یا یه سیب زمینی رو آتیشه، ما یه چرخش سه بعدی رو که نمیبینیم تنها چیزی که می تونیم ببینیم تغییر ارتفاع المانمونه که این چرخش رو برامون تداعی میکنه.

transform: rotateX(45deg);

چرخش در محور y:

یه کباب ترکی یا یه رقصنده رو میله رو تجسم کنید(نه اونقدر حالا) چرخش رو محور y همینطوریه همه چیزی که متوجه میشید تغییر عرض المانتونه که چرخش در محور y رو براتون تداعی میکنه.

transform: rotateY(45deg);

چرخش در محور z:

تصور کنید یه نیزه داره میره تو صفحتون و نیزه در حال چرخشه، این در اصل بهترین جهت برای چرخوندن المان هاست برای اینکه با چرخشش در جهت عقربه های ساعت و یا برعکس به راحتی می تونید متوجه تغییر جهت چرخشتون بشید.

transform: rotateZ(45deg) – در جهت حرکت عقربه های ساعت

transform: rotateZ(-45deg) – در خلاف جهت عقربه های ساعت

منو تو کانال های زیر رو فالو کنید:

اینستاگرام: yasharhabibimedia

تلگرام: yasharhabibimedia

یوتیوب: yasharhabibimedia

4. Skew

با این قابلیت می تونید المان هاتون رو کج کنید. هم مقدار مثبت میگیره هم منفی، و مثل روتیت(چرخش) واحد اندازه گیریش درجه‌ست.

مقدار مثبت x، المان رو به چپ کج میکنه و مقدار منفی x، برعکسشه. و همینطور تغییر مقدار y اونو به بالا و پایین کج میکنه.

در جهت x:

skewX(45deg) or skew(45deg);

درجهت y:

transform: skewY(80deg);

5. ترکیب کردن transformها

خیلی راحت میشه چندین نوع transform رو همزمان اعمال کرد. ترتیب مهمه(بعضی مواقع) طوری که دومین تغییر ترنسفورم روی اولین تغییر اعمال میشه و سومی روی نتیجه تغییر دوتای اول اعمال میشه.

transform: translateX(200px) rotateX(45deg) scaleY(1.5) skewX(45deg);

همه این تغییر ترنسفورم ها روی یه رویدادی که توسط کاربر انجام میشه مثل با موس رفتن روی یه المان(hover)، کلیک کردنش، فوکوس کردن روش، اکتیو و ... . برای اینکه این جادو رو در عمل بتونید ببینی، می تونید این تغییر ترنسفورم ها رو به این رویداد ها اضافه کنید.

.element-to-animate{
     display: block
}

.element-to-animate:hover{
     transform: translateX(200px) rotateX(45deg) scaleY(1.5) skewX(45deg);
}

قسمت دوم: ترنزیشنز(Transitions)

اگه قسمت بالا رو خونده باشید و کار کرده باشید، ممکن تو حالت هاور(hover) متوجه یه حرکت غیرعادی شده باشید. این دقیقا همون کاریه که ترنزیشن انجام میده. ترنزیشن ها(transitions) به سیال و رون شدن انیمیشن ها کمک میکنن.

ترنزیشن ها رو با کمک این پراپرتی ها میشه کنترل کرد:

• transition-property
• transition-duration
• transition-timing-function
• transition-dela

1. transition-property

با این ویژگی می تونید مشخص کنید که ترنزیشنتون رو کدوم ویژگی cssای اعمال بشه. مثلا می خواید این ترنزیشن روی مارجین و پدینگ اعمال بشه یا بک گراند و یا بردر و ... . پس شما می تونید یه ترنزیشن رو به یه ویژگی و یا تمام ویژگی های اون المان اعمال کنید(البته ویژگی هایی که میشه بهشون ترنزیشن داد). یه لیست کامل از ویژگی هایی که جز این لیست می تونن باشن رو می تونید اینجا پیدا کنید.

اعمال کردن ترنزیشن به یه ویژگی خاص CSS:

transition-property: background-color;

اعمال یه ترنزیشن به کل لیست ویژگی های CSS المانمون:

transition-property: all;

2. transition-duration

مدت زمانی که انیمیشن اجرا میشه. براحتی میتونه با ثانیه یا میلی ثانیه مقدار دهی بشه. پیشنهاد میکنم که از ثانیه استفاده کنید چون وقتی می خونیدش راحتتر درکش میکنید که چقدر انیمیشنتون طول میکشه.

transition-duration: 0.5s;

3. transition-timing-function

کی سرعت رو دوست نداره!

سرعت چیزیه که میتونه باعث ساخت یه تجربه کاربری خوب بشه یا اونو از بین ببره، پس پیشنهاد میکنم کنترلش کنید. اینو از طریق transition-timing-function می تونید اعمال کنید.

خود CSS چنتا مقدار از پیش تعریف شده داره که اونارو می تونیم برای کنترل سرعتمون استفاده کنیم مثل:(ease, ease-in, ease-in-out)

و اگه دوست دارید کنترل سرعت رو به طور کامل دست خودتون بگیرید از Bezier Curves استفاده کنید

transition-timing-function: ease;

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

4. transition-delay

با این می تونید یه وقفه ای بین اون رویدادی که انیمیشنتون رو شروع میکنه و زمان شروع واقعی انیمیشنتون بدید، یعنی به زبان ساده با این می تونید مشخص کنید که انیمیشنتون چقدر طول بکشه که شروع بشه و با مقادیر ثانیه و میلی ثانیه مقدار دهی میشه:

transition-delay: 0.5s;

مختصر نویسی پراپرتی transition

اینجوری همه رو میشه یه جا تعریف کرد:

transition: (property) (duration) (transition-timing-function) (transition-delay);

استفاده همزمان از Transforms و Transitions

وضعیت اول: عادی

.element-to-animate{
       display: block;
       transition: transform 1s ease 0.2s, background 1s; 
}

وضعیت دوم: هاور(Hover)

.element-to-animate:hover{ 
       background: black; transform: translateX(200px);
 }

برای ترنزیشن بین وضعیت اول و دوم هم میشه به صورت جدا واسه همه پراپرتی ها با مقدارهای زمانی متفاوت مقدار دهی کرد هم میشه یه چیز کلی واسه همشون مقداردهی کرد مثلا اینطوری:

transition: all 1s ease 0.2s;

قسمت سوم: فریم‌های کلیدی(keyframes)

کی فریمز ها(keyframes) به تغییر انیمیشن از یک نقطه زمانی به نقطه زمانی دیگه کاربرد دارن.

به دو روش میشه با فریم های کلیدی کار کرد:

1 - روش از(From) - به(to)

2- روش درصدی

1 - روش از(From) - به(to)

تو این روش فقط دوتا وضعیت در طول انیمیشن داریم - وضعیت شروع(from) و وضعیت پایان(to).

@keyframes animation_name {
            from { }
            to { }
}

برای انیمیشن دادن به یه المان(مثلا یه ماشین) که به طور افقی از وضعیت ابتداییش حرکت میکنه:

@keyframes drive{
      from {
                transform: translateX(-200);
               }
       to {
                transform: translateX(1000px);
            }
  }

.car{
      animation-name: drive;
      animation-duration: 3s;
      animation-fill-mode: forwards;
      animation-delay: 2s;
      animation-iteration-count: infinite;
      animation-timing-function: ease-in; 
      animation-direction: normal;
}

2- روش درصدی

در حال حاضر برای انیمیشن هایی که بیشتر از دو وضعیت(شروع و پایان) دارن نمی تونیم از From-to استفاده کنیم. واسه انیمیشن هایی که بیشتر از دو وضعیت دارن از روش درصدی استفاده میکنیم. رویه درصدی انیمیشن رو به وضعیت های میانی متعدد همراه با وضعیت شروع و پایان تقسیم میکنه. وضعیت شروع با %0 مشخص میشه، وضعیت پایان هم با %100 . هرچقدر هم که بخواید وضعیت میانی میتونید داشته باشید.

مثال: 0% — 25% — 50% — 75% — 100%

@keyframes jump{
       0% { transform: translateY(-50px) }
       50% { transform: translateY(-100px) }
      100% { transform: translateY(-50px) }
}

مختصر نویسی انیمیشن

animation: (animation-name) (animation-duration) (animation-fill-mode) (animation-timing-functio) (animation-iteration-count) (animation-direction) (animation-delay);

نکته: تاخیر انیمیشن(animation-delay) همیشه بعد از زمان انیمیشن(animation-duration) میاد.

مثال:

.car{
      animation-name: drive;
      animation-duration: 3s;
      animation-fill-mode: forwards;
      animation-delay: 2s;
      animation-iteration-count: infinite;
      animation-timing-function: ease-in;
       animation-direction: normal;
}

.car{
      animation: drive 3s ease-in infinite normal 2s;
}

خوب الان دوتا انیمیشن داریم - drive و jump ، که می خوایم به المان ماشینمون اضافش کنیم. اینکارو تو یه خط میتونیم انجامیش بدیم با استفاده از، زنجیره انیمیشن "Chaining Animations"

زنجیره انیمیشن"Chaining Animations" چیه؟

اجرای چنتا انیمیشن با CSS خیلی راحته، با قرار دادن یه کاما(,) بین انیمیشن ها میشه اونارو یکی بعد از دیگری اجرا کرد. مثل:

.car{
       animation: drive 3s ease-in infinite normal 2s, jump 2s ease 4 alternate reverse;
}

دسته بندی پراپرتی های انیمیشن(Animation Properties):

• از چه انیمیشنی استفاده کن؟

نام انیمیشن animation-name: اسم انیمیشن که بعد از کلمه کلیدی keyframes@ اومده رو بهش نسبت میدیم.

• وقتی انیمیشن تموم شد چی کار کن؟

انیمیشن تموم شده animation-fill-mode: وقتی انیمیشن از پنجره انیمیشن خارج شد چی کار کن.

• اگر می خواید انیمیشن n مرتبه تکرار بشه

تعداد دفعات تکرار انیمیشن animation-iteration-count: تعداد دفعاتی که می خواید انیمیشن تکرار بشه رو بدید بهش. میتونه یه عدد باشه یا اگر می خواید مدام تکرار بشه از مقدار "infinite" استفاده کنید.

• اگر می خواید جهت انیمیشن برعکس بشه

جهت انیمیشن animation-direction: لازم نیست یه انیمیشن جدا بنویسید واسش تنها کاری که باید بکنید اینه که به این ویژگی مقدار دهی کنید.

تو روش From - to

reverse: to - from
alternate: from-to -> to-from -> from-to
alternate-reverse: to-from -> from-to -> to-from

تو روش درصدی

reverse: 100% - 0%
alternate: 0% - 100% -> 100% - 0% -> 0% - 100%
alternate-reverse: 100% - 0% ->0% - 100% ->100% - 0%

جمع بندی

می تونه واسه شروع کار با انیمیشن ها تو css یکم پیچیده بنظر بیاد ولی همین که یکم باهاش کار میکنید می بینید که خیلی هم راحته و هیجان انگیز.

مرسی که تا اینجا با من بودید و وقت گذاشتید. امیدوارم که این مطلب بدردتون بخوره و اگر اینطور بود حتما این مقاله رو لایک کنید و منو هم اینجا هم تو شبکه های اجتماعی فالو کنید:

اینستاگرام: yasharhabibimedia

تلگرام: yasharhabibimedia

یوتیوب: yasharhabibimedia