جلسه ۷۷ – انیمیشن در CSS

همونطور که تو مقدمه فصل آشنایی با انیمیشن ها کمی صحبت کردیم، متوجه شدیم که انیمیشن ها، به خاطر متحرک بودنشون، باعث جلب توجه کاربر به محتوای وب سایت ما می‌شن.

ساختار انیمیشن ها در CSS

انیمیشن ها، از نظر ساختاری، شباهت زیادی به transition ها دارن که در مورد transition ها می‌تونین تو مقاله transition ها در CSS میزفا بیشتر مطالعه کنین.

اما برای درک تفاوتشون، باید به تعریف اون ها دقت کنیم.

تعریف transition، عبارت است از: تغییر استایل یک یا چند عنصر،‌ از یک حالت به حالت دیگر، در طول مدت زمانی خاص.

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

انیمیشن ها در CSS، از دو قسمت کلی تشکیل می‌شن:

• خاصیت های انیمیشن
• کلمه کلیدی keyframes@

حالا بریم که هر کدوم از این فسمت ها رو بررسی کنیم.

خاصیت های انیمیشن

قبل از ساختن یک انیمیشن، باید خاصیت های اون رو تعیین کنیم، در ادامه این آموزش طراحی سایت با این خاصیت ها آشنا می‌شویم.

خاصیت هایی نظیر نام اون، مدت زمان، نحوه تکرار، تعداد بار های اجرا شدن و غیره.

تمام این خاصیت ها، به عنصری که قراره انیمیت بشه (مورد انیمیشن شدن قرار بگیره!) اختصاص داده می‌شه.

تعیین این خاصیت ها، دقیقا مثل تعیین خاصیت های یک transition هست، با یک سری فرق کوچیک.

این خاصیت ها عبارتند از:

• animation-name
• animation-duration
• animation-delay
• animation-iteration-count
• animation-direction
• animation-timing-function
• animation-fill-mode
• animation

خاصیت animation-name

اولین قدم برای ساخت انیمیشن در CSS، اختصاص دادن یک اسم به اونه.

این اسم می‌تونه هر اسم دلخواهی باشه.

برای مثال، اگه بخوایم یک عنصر div رو انیمیت کنیم، اولین قدم به شکل زیر خواهد بود:

div{
   animation-name: myFirstAnimation;
}

خاصیت animation-duration

خاصیت دومی که در ساخت یک انیمیشن به کار می‌ره، خاصیت animation-duration هست.

توسط این خاصیت، می‌تونیم مشخص کنیم که انیمیشن ما،‌قراره در طول چه مدت زمانی اجرا بشه.

مقادیر مورد قبول این خاصیت، مقادیر زمانی بر حسب ثانیه و یا میلی ثانیه هستن.

تو کد زیر، تعیین می‌کنیم که انیمیشن ما، باید در طول ۲ ثانیه،‌ اجرا بشه.

div{
   animation-name: myFirstAnimation;
   animation-duration: 2s;
}

نکته: تعیین کردن این خاصیت، ضروریه، چرا که در غیر این صورت، مقدار پیشفرض اون صفر ثانیه تلقی شده و در نهایت، انیمیشن ما اجرا نمی‌شه.

خاصیت animation-delay

توسط این خاصیت، می‌تونیم اجرای انیمیشن رو به تاخیر بندازیم.

مقادیر مورد قبول این خاصیت،‌ مقادیر زمانی بر حسب ثانیه و یا میلی ثانیه هستن.

به کد زیر توجه کنین:

div{
   animation-name: myFirstAnimation;
   animation-duration: 2s;
   animation-delay: 1.5s;
}

توسط کد بالا، می‌تونیم کاری کنیم که انیمیشن ۲ ثانیه ای ما، بعد از ۱.۵ ثانیه شروع به اجرا شدن کنه.

خاصیت animation-iteration-count

این خاصیت، تعداد بار هایی رو مشخص می‌کنه که انیمیشن ما، قراره اجرا بشه.

یک انیمیشن تو CSS، طی یک سیکل و چرخه مشخص اجرا می‌شه. توسط این خاصیت، تعیین می‌کنیم که چرخه انیمیشن ما، چند بار اجرا می‌شه.

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

• عدد: تعداد بار های تکرار
• infinite: تکرار تا ابد

این خاصیت رو هم به کدمون اضافه می‌کنیم:

div{ 
   animation-name: myFirstAnimation; 
   animation-duration: 2s; 
   animation-delay: 1.5s; 
   animation-iteration-count: infinite;
}

بدین ترتیب، انیمیشن مورد نظر ما تا ابد تکرار می‌شه.

خاصیت animation-direction

این خاصیت، جهت اجرا شدن انیمیشن رو مشخص می‌کنه.

مقادیر مورد قبول این خاصیت، عبارتند از:

• normal: مقدار پیش‌فرض. انیمیشن به صورت مستقیم اجرا می‌شه.
• reverse: انیمیشن به صورت وارونه اجرا می‌شه.
• alternate: انیمیشن تو چرخه اول به صورت مستقیم،‌ و تو چرخه دوم به صورت وارونه اجرا می‌شه.
• alternate-reverse: انیمیشن تو چرخه اول به صورت وارونه، و تو چرخه دوم به صورت مستقیم اجرا می‌شه.

برای درک بهتر این خاصیت، به گوی های بازیگوش زیر دقت کنین:

همونطور که مشاهده می‌کنین، گوی های normal و reverse بعد از اتمام انیمیشنشون، دوباره به حالت اولیه بر می‌گردن.

اما این موضوع در مورد دو گوی دیگه صادق نیست.

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

خاصیت animation-timing-function

این خاصیت رو، زمانی استفاده می‌کنیم که می‌خوایم سرعت تغییر استایل در مراحل مختلف animation رو مشخص کنیم.

خاصیت مورد نظر، مقادیر زیر رو قبول می‌کنه.

• ease: مقدار پیش فرض
• ease-in: این مقدار، با سرعت پایین شروع می‌کنه و در انتها به سرعت بالا می‌رسه.
• ease-out: این مقدار، با سرعت بالا شروع می‌کنه و در انتها به سرعت پایین می‌رسه.
• ease-in-out: این مقدار، با سرعت پایین شروع می‌کنه، در میانه به سرعت بالا می‌رسه و در انتها مجددا به سرعت پایین می‌رسه.
• linear: این مقدار، تمام فرآیند رو با سرعت یکسان انجام می‌ده.

برای درک بهتر این مفهوم، به بار های زیر توجه کنین:

اگه تو جایی از مطالب براتون ابهام و یا سوالی پیش اومد حتما تو قسمت نظرات بپرسین. من و دیگر اعضای تیم میزفا همراهتون هستیم 🙂

خاصیت animation-fill-mode

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

مقادیر مورد قبول این خاصیت، عبارت هستن از:

• forwards: آخرین استایل انیمیشن، به اون عنصر اختصاص داده می‌شه.
• backwards: اولین استایل انیمیشن، به اون عنصر اختصاص داده می‌شه.
• none: مقدار پیش فرض.
• both: مقادیر اولیه CSS رو در نظر نمی‌گیره و تابع استایل های انیمیشن خواهد بود.

خاصیت animation-play-state

کاربرد این خاصیت، مشخص کردن حالت انیمیشن خواهد بود.

مقادیر مورد قبول این خاصیت عبارت هستن از:

• running: حالت پیش فرض. انیمیشن در حال اجرا خواهد بود.
• paused: انیمیشن متوقف خواهد شد.

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

برای مثال، فرض کنین که عنصر divای داریم که در حال انیمیت شدن هست و می‌خوایم زمانی که نشانگر رو روی اون می‌بریم، انیمیشن مورد نظر متوقف بشه.

کافیه بنویسیم:

div:hover{
   animation-play-state: paused;
}

خاصیت animation

این خاصیت، خاصیت کوتاه شده تمامی خاصیت های دیگه انیمیشن محسوب می‌شه.

با کمک این خاصیت،‌ می‌تونیم تمامی ویژگی های انیمیشنمون رو در یک دستور تعریف کنیم.

مقادیر وارد شده به این خاصیت،‌ مثل خاصیت کوتاه شده transition، ترتیب خاصی ندارن. می‌تونیم برای نظم تو کدامون از ترتیب فرضی زیر استفاده کنیم:

animation: name/duration/timing-function/delay/iteration-count/direction/fill mode/play state;

فقط باید به یک نکته توجه کرد: همیشه مقدار delay رو بعد از duration بنویسید. در غیر این صورت، ممکنه این دو مقدار رو با هم اشتباه بگیره.

بیاین بررسی کنیم و ببینیم که این خاصیت،‌چقدر می‌تونه کدای ما رو سبک کنه؟ به مثال زیر توجه کنین:

/* --- دستورات با خاصیت های اصلی --- */
animation-name: explode;
animation-duration: 3s;
animation-timing-function: linear;
animation-iteration-count: 4;
animation-fill-mode: forwards;
/* --- دستورات با خاصیت کوتاه شده --- */
animation: explode 3s linear 4 forwards;

همونطور که می‌بینیم، تونستیم ۵ خط دستور رو در یک خط خلاصه کنیم 🙂

کلمه کلیدی keyframes@

مرحله دوم ساختن یک انیمیشن در CSS، تعیین مراحل پیشروی اون هست.

اینکه قراره اون انیمیشن، با توجه به خاصیت هایی که براش تعیین شده، چه کاری انجام بده.

این کار رو، با استفاده از کلمه کلیدی keyframes@ انجام می‌دیم:

همونطور که تو تصویر بالا مشاهده می‌کنیم،‌ برای استفاده از keyframes@، کافیه اون رو بنویسیم و بعد از اون، اسم انیمیشن مورد نظرمون رو وارد کنیم.

برای مثال، جهت انیمیت کردن یک عنصر div، می‌تونیم از کد زیر استفاده کنیم.

div{ 
   animation-name: myFirstAnimation; 
   animation-duration: 2s; 
   animation-delay: 1.5s; 
   animation-iteration-count: infinite; 
}

@keyframes myFirstAnimation{
   /* --- مراحل پیشروی انیمیشن --- */
}

حالا مراحل پیشروی انیمیشن رو چطور مشخص می‌کنیم؟

به این منظور، دو راه پیش رومون داریم:

• استفاده از from و to
• استفاده از درصد پیشروی

استفاده از from و to

این روش برای انیمیشن های ساده استفاده می‌شه، عموما انیمیشن هایی که تو دو مرحله خلاصه می‌شن.

به کد زیر دقت کنین:

@keyframes myFirstAnimation{
   from{
      transform: scale(1);
   }
   to{
      transform: scale(2);
   }
}

کافیه برای قسمت from، استایل اولیه عنصرمون رو بنویسیم و در قسمت to، استایلی رو می‌نویسیم که عنصر قراره به سمت اون انیمیت بشه.

حالا کد بالا رو تو کاربرد بررسی می‌کنیم:

dark

استفاده از درصد پیشروی

روش دومی که می‌تونیم برای مشخص کردن مراحل انیمیشن استفاده کنیم، استفاده از درصد پیشروی انیمیشن هست.

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

این موضوع، دست ما رو برای استفاده از مراحل بیشتری تو انیمیشنمون باز می‌کنه.

برای مثال، کد زیر رو ببینین:

dark

حالا بیاید به مراحل اون یه نگاهی بندازیم:

@keyframes secondAnimation{
   0%{
      left:0px;
      top:0px;
      background-color:indianred;
   }
   50%{
      left:100px;
      top:10px;
      background-color:lightblue;
   }
   100%{
      left:30px;
      top:30px;
      background-color:lightgreen;
   }
}

همونطور که میبینیم،‌ انیمیشن مورد نظر ما، در نقاط ۰٪ (ابتدای انیمیشن)، ۵۰٪ (نیمه ی انیمیشن) و ۱۰۰٪ (انتهای انیمیشن) دارای استایل های متفاوتی هست، و انیمیشن مورد نظر، ‌فقط حاصل انتقال عنصر بین این استایل هاست.

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

ما می‌تونیم در هر درصد پیشروی دلخواهی از انیمیشنمون، استایل متفاوتی رو قرار بدیم تا اون رو جذاب تر کنیم.

خاصیت های انیمیشن ناپذیر

تا اینجا چند خاصیت نظیر background-color و position رو تو اجرای انیمیشن بررسی کردیم.

اما تمامی خاصیت های CSS، نمی‌تونن انیمیشن پذیر باشن.

این موضوع در مورد بحث transition هم صادقه، خاصیت هایی که نمی‌تونن شامل مراحل مختلف باشن، با انیمیشن ها و transition ها کنار نمیان و کار نمی‌کنن.

برای مثال، خاصیت width، یک خاصیت انیمیشن پذیر محسوب می‌شه. چرا که برای تغییر عرض یک عنصر از ۱۰۰ پیکسل به ۵۰۰ پیکسل، می‌تونیم مراحل زیر رو طی کنیم:

1. از ۱۰۰ تا ۲۰۰
2. از ۲۰۰ تا ۳۰۰
3. از ۳۰۰ تا ۴۰۰
4. از ۴۰۰ تا ۵۰۰

یا برای تغییر شفافیت یک عنصر از ۰.۴ تا ۱، توسط خاصیت opacity، مراحل زیر رو طی می‌کنیم:

1. از ۰.۴ الی ۰.۷
2. از ۰.۷ الی ۱

اما خاصیت هایی مثل display، از خاصیت هایی هستن که نمی‌تونیم به اون ها انیمیشن و محدوده ی زمانی اختصاص بدیم.

چرا که مرحله خاصی ندارن. طبق خاصیت display، یک عنصر یا هست، یا نیست!

تو سایت مرجع developer.mozilla، می‌تونین خاصیت های انیمیشن پذیر رو مطالعه کنین.

پشتیبانی مرورگر ها

پیشتیبانی مرورگر ها از خاصیت های transition به شرح زیره:

• Desktop Chrome: نسخه ۴ به بالا
• Mobile Chrome: نسخه ۸۱ به بالا
• Desktop Firefox: نسخه ۵ به بالا
• Mobile Firefox: نسخه ۶۸ به بالا
• Desktop Safari: نسخه ۵.۱ به بالا
• Mobile Safari: نسخه ۶.۰ به بالا
• Desktop IE: نسخه ۱۰ به بالا
• Desktop Edge: نسخه ۱۲ به بالا

پایان ترم

سوال:

قصد داریم کدی بنویسیم که توسط اون، div شامل CSS Animations – Mizfa رو طی یک ثانیه، مدام پدیدار و ناپدید کنیم.

کد زیر برای این امر نوشته شده، اما کار نمیکنه. مشکل از کجاست؟ چطوری می‌تونیم این مشکل رو حل کنیم؟

<div>
   CSS Animations - Mizfa
</div>

div{
background-color: red;
padding:30px;
display: inline-block;
animation-duration: 1s;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-name: show;
border-radius: 10px;
color:#fed009;
background-color:#131313;
}

@keyframes show{
from {
display: : inline-block;
}
to{
display: : none;
}
}

به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)

نتیجه گیری

تو این جلسه از آموزش CSS با انیمیشن ها تو CSS آشنا شدیم و یاد گرفتیم که چطور می‌تونیم توسط خاصیت های انیمیشن و کلمه کلیدی keyframes@، انیمیشن های ساده ای بسازیم.

خاصیت هایی که یاد گرفتیم خلاصه وار به صورت زیرن:

• animation-name: نام animation
• animation-duration: تعیین مدت زمان انجام animation
• animation-delay: تعیین تاخیر قبل از انجام animation
• animation-timing-function: تعیین نحوه انجام فرآیند animation
• animation-iteration-count: تعداد چرخه های انجام animation
• animation-direction: جهت انجام animation
• animation-play-state: تعیین متوقف شدن یا نشدن animation
• animation-fill-mode: تعیین وضعیت عنصر تحت انیمیشن پس از اتمام animation
• animation: خاصیت کوتاه شده animation یا همون short hand property

مثال های بیشتر و جذاب تر رو به جلسه بعد موکول می‌کنیم، امیدوارم تمامی مطالب به اندازه کافی براتون قشنگ بوده باشه 🙂

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

مدیر محتوا: علی اسمعیلی‌