خاصیت Animation (انیمیشن) و Keyframe در CSS

مسیح دیندار
مدیریت
عضو شده: 2021-04-12 14:23:35
2021-05-22 12:38:58

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

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

کی فریم ها به دو صورت نوشته می شوند:

یا به صورت from و to هستند. که from نقطه و استایل آغازین انیمیشن است. و to نقطه پایانی انیمیشن. به این صورت که استایل ها در هر دو خاصیت باید یکسان باشند. مثال:

@keyframes talkina{
  from {width: 50px;}
  to {width: 200px;}
}

در این مثال، عرض المنت در ابتدا 50 پیکسل است و در انتها 200 پیکسل. با این کی فریم، عنصر طراحی مورد نظرمان به صورت مداوم عرض آن تغییر خواهد کرد. این دستور را می توان برای سایر خاصیت ها مثل left و right یا حتی direction و ... هم استفاده کرد.

 

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

مثال:

@keyframes talkina{
  0%   {top: 0px;}
  25%  {top: 200px;}
  75%  {top: 50px}
  100% {top: 100px;}
}

 

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

div {
  animation: talkina 5s infinite;
}
  1. بخش اول، نام کی فریم هست که قبلا تعریف کرده اید
  2. بخش دوم، مدت زمان اجرای انیمیشن هست. این مدت زمان برای هر لوپ و حلقه از انیمیشن است. در کی فریم های درصدی، هر قدر که زمان animation بیشتر باشد، سرعت اجرای انیمیشن کندتر و آهسته تر خواهد بود.
  3. بخش سوم نوع اجرای حلقه و لوپ انیمیشن است. در کد بالا infinite به معنای نامحدود است و انیمیشن ما به صورت نامحدود تکرار خواهد شد.

 

مثال ترکیب هر دو خاصیت:

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation: talkina 5s infinite;
}

@keyframes talkina {
  0%   {top: 0px;}
  25%  {top: 200px;}
  75%  {top: 50px}
  100% {top: 100px;}
}