زمان بندی انیمیشن در css

زمان بندی انیمیشن در css

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

زمان بندی انیمیشن در css زمان بندی انیمیشن در css زمان بندی انیمیشن در css animation css

زمان بندی انیمیشن در css

تاخیر یک انیمیشن

خاصیت animation-delay زمان تاخیر شروع یک تصویر متحرک را مشخص می نماید:

تنظیم اجرای چندین بار یک انیمیشن

ویژگی animation-iteration-count در CSS3 مشخص میکند که یک انیمیشن چند بار پشت سر هم اجرا شود. اگر میخواهید تصویری برای همیشه متحک باشد، باید به این خاصیت مقدار ” infinite” بدهید.

مثال زیر انیمیشن را سه بار قبل از توقف آن اجرا خواهد کرد:

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

خاصیت animation-direction اجازه میدهد که انیمیشن در جهت معکوس اجرا شود. اگر به این خاصیت مقدار ” alternate” بدهید، بصورت یک در میان، به سمت جلو و سپس در جهت معکوس حرکت خواهد کرد. مقدار”reverse” نیز تصویر را مرتبا در جهت معکوس متحرک می سازد.

مشخص کردن منحنی سرعت انیمیشن

خاصیت animation-timing-function، منحنی سرعت انیمیشن را مشخص می کند. این خاصیت مقادیر زیر را می تواند داشته باشد:

► ease : یک تصویر متحرک را با حرکت آهسته شروع میکند، سپس سریع، و بعد از آن با آرامی پایان می یابد. (این مقدار، مقدار پیش فرض خاصیت است).

► linear : یک انیمیشن را با سرعت ثابت از شروع تا پایان مشخص میکند.

► ease-in : انیمیشنی با شروع آهسته مشخص میکند.

► ease-out : تصویری متحرک با پایانی آهسته را نمایش می دهد.

► ease-in-out : انیمیشنی با شروع و پایان آهسته.

► (cubic-bezier(n,n,n,n : اجازه می دهد خودتان مقادیر را در تابع  cubic-bezier مشخص کنید.

 مثال زیر برخی از منحنی سرعت های مختلف است که می تواند مورد استفاده قرار گیرد را نشان می دهد:

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

در مثال زیر از شش خاصیت انیمیشن عناصر استفاده شده است :

به صورت مختصر نویسی داریم:

 شیوه زمان بندی انیمشین

در زمان تعریف keyframes ما میتوانیم از from برای تعریف شرایط شروع انیمیشن و از to برای شرایط پایان انیمیشن استفاده کنیم، وقتی از from و to استفاده می کنیم وابسته به مدت زمان تعیین شده، مرورگر به صورت خودکار زمان را طوری تنظیم میکند که از حالت from تا به حالت to در مدت زمان تعریف شده اجرا شود.
بجای from و to ما میتوانیم از % نیز استفاده کنیم. مقدار ۰% شروع انیمیشن و مقدار ۱۰۰% پایان انیمشین را تعیین میکند.
در هنگام استفاده از % ما می توانیم مراحل انمیشین را به ۱۰۰ قسمت تقسیم کنیم، و در هر قسمت کدهای مورد نظرمان را قرار دهیم.

سایر مقادیر انیمشین

خاصیت انیمیشن به غیر از دو مقداری که نام پارامتر و مدت زمان انیمیشن بود مقادیر دیگری را نیز در بر میگیرد.
قاعده :

 

name : نام انیمیشن
function : افکت زمانی که یکی از مقادیر زیر را میگیرد

  • ease
  • ease-in
  • ease-out
  • ease-in-out

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

ویژگیهای انیمیشن CSS3

در زیر لیست قوانین @keyframes و  تمام خواص انیمیشن را می بینید:

► خاصیت @keyframes : کد انیمیشن را مشخص میکند.

► animation : یک ویژگی مختصر نویسی برای تنظیم تمام خواص انیمیشن ( به جز animation-play-state و animation-fill-mode)

► animation-delay : تاخیر شروع یک تصویر متحرک را مشخص می نماید.

► animation-direction : تعیین میکند که تصویر در جهت معکوس اجرا شود و یا در یک دوره متناوب.

► animation-duration : تعیین میکند که چند ثانیه و یا میلی ثانیه طول میکشد تا یک چرخه انیمیشن کامل شود.

► animation-fill-mode : استایل عنصر را وقتی که انیمیشن اجرا نمی شود، تعیین میکند (وقتی تمام میشود و یا د زمان تاخیر انیمیشن).

► animation-iteration-count : تعداد دفعات اجرای انیمیشن را مشخص میکند.

► animation-name : نام انیمیشن @keyframes را مشخص می نماید.

► animation-play-state : تعیین میکند که انیمیشن در حال اجراست یا متوقف شده است.

► animation-timing-function : منحنی سرعت انیمیشن را مشخص میکند.          

آموزش CSS آموزش طراحی وب

دیدگاه خود را بیان کنید