در مطالب قبلی در مورد  ساخت انمیشن و تصاویر متحرک در زبان CSS3 مطالبی را در حد مقدماتی خدمت شما ارائه کردیم و گفتیم که برای ساخت انیمیشن در این زبان باید دومرحله را طی کرد که یکی از آن ها ساختار animation   بود.دراین مطلب قصد داریم تا این ساختار را به طور کامل برای شما تشریح و بررسی کنیم.

خاصیت animation :

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

شکل کلی استفاده و ساختار دستوری خاصیت animation به صورت زیر است :

;Syntax: animation : name duration timing-function delay iteration-count direction 

نکته مهم : خاصیت animation مخفف و ساده شده ۶ خاصیت زیر است :

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

شما می توانید این ۶ خاصیت را به صورت تک تک مقدار دهی کرده و یا اینکه شش مقدار آنها را در این حالت کوتاه شده به ترتیب قرار دهید . توضیحات کامل راجع هر یک از این خاصیت را در صفحات مربوط به آنها قرار داده ایم . برای دریافت اطلاعات راجع به هر کدام بر روی نام آن کلیک نمایید .

توضیح هر یک از موارد syntax :

name:

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

duration:

این خاصیت مدت زمانی که طول می کشد تا عنصر از حالت اول به حالت دوم تغییر وضعیت داده و تغییرات بر روی آن اعمال شوند ، را بر حسب ثانیه تعیین می کند . مسلما هر چه مقدار آن بیشتر باشد ، این عمل به صورت آهسته تر انجام می شود .
تعیین این پارامتر اجباری است ، اگر مقدار آن را تعیین نکنید ، مقدار ۰ را خواهد داشت و در این حالت هیچ افکت تصویری و انمیشین نخواهیم داشت .

 timing-function:

این پارامتر تعیین کننده افکت تصویری برای انجام عملیات است .

delay:

این پارامتر مدت زمان تاخیر انجام افکت ، پس از درخواست آن به مرورگر را تعیین می کند . برای مثال اگر ۳ ثانیه تعیین شود ، افکت پس از ۳ ثانیه فعال خواهد شد .

iteration-count:

این پارامتر تعداد دفعاتی که قرار است افکت تصویری تکرار شور را تعیین می کند . می توان دفعات محدودی برای آن تعیین کرد و یا انجام آن را بی نهایت قرار داد .

direction:

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