با ویژگی animation می توان تمام موارد کنترل روی انیمیشن را اعمال نمود
فرض کنید می خواهیم برای تگ div انیمیشن اعمال کنیم

 

div
{
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
}


 مرورگرهایی که از ویژگی animation پشتیبانی می کنند عبارت اند از :

Internet Explorer Firefox Opera Google Chrome Safari

 در مرورگرهای IE10 , FIREFX , OPERA دستور ANIMATION شناخته می شود

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

-webkit-animation


 با یک دستور Animation می توان 6  مقدار کنترلی روی انیمیشن را مشخص نمود

 که عبارتند از :

 

animation-name یا نام انیمیشن است که قبلا با ویژگی keyframe مشخص شده است

animation-duration یا طول مدت اجرای انیمینش بر حسب ثانیه s یا میلی ثانیه ms

animation-timing-function یا سرعت اجرای انیمیشن

animation-delay یا ایجاد تاخیر در اجرای انیمینش به مقدار زمان مشخص شده

animation-iteration-count یا تعداد تکرار اجرای انیمیشن

and animation-direction یا مشخص می کند که انیمیشن ایا در جهت عکس اجرای اولیه خود هم اجرا شود یا نه

 
 همیشه طول مدت اجرای انیمیشن را مشخص کنید . در غیر این صورت مقدار پیش فرض که صفر است در نظر گرفته می شود و به معنای عدم اجرای انیمیشن است
 

 مقادیر پیش فرض برای 6 پارامتر دستور animation از چپ به راست عبارت اند از :

none 0 ease 0 1 normal

 روش استفاده از دستور animation :
 
animation: name duration timing-function delay iteration-count direction;
 
مطالب بیشتر

 همانطور که گفتیم ، با یک ویژگی animation می توان 6 مورد کنترلی در اجرای انیمینش را مشخص نمود

شما می توانید هر مورد از این 6 مورد را با یک ویژگی جداگانه نیز معرفی کنید

 
ویژگی animation-name

مرورگرهای IE9 و قبل از ان از این ویزگی پشتیبانی نمی کنند

برای  مرورگرهای فایر فاکس ، ie10 و اپرا از همین نام animation-name استفاده می شود

در مرورگرهای وب کیت یعنی کروم و سفاری از پسوند -webkit- استفاده می شود

 نام انیمینش همان نامی است که جلوی دستور keyframes مشخص کرده بودیم
 
ویژگی animation-duration

این ویژگی مدت زمان اجرای انیمینش را مشخص می کند

مرورگرهای IE9 و قبل از ان از این ویزگی پشتیبانی نمی کنند

برای  مرورگرهای فایر فاکس ، ie10 و اپرا از همین نام animation-duration استفاده می شود

در مرورگرهای وب کیت یعنی کروم و سفاری از پسوند -webkit- استفاده می شود

 
 مشاهده نمونه های عملی
ویژگی animation-timing-function

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

این ویژگی در مرورگرهای زیر پشتیبانی می شود :

Internet Explorer Firefox Opera Google Chrome Safari

 فقط به موارد زیر توجه نمائید :

مرورگرهای IE9 و قبل از ان از این ویژگی پشتیبانی نمی کنند

برای  مرورگرهای فایر فاکس ، ie10 و اپرا از همین نام animation-timing-function استفاده می شود

در مرورگرهای وب کیت یعنی کروم و سفاری از پسوند -webkit- استفاده می شود

روش نوشتن این ویژگی بصورت زیر است :
 
animation-timing-function: value;

 که به جای value می توانید مقادیر دلخواه خود و یا مقادیر از قبل تعریف شده  زیر را قرار دهید :
  •  linear

باعث می شود انیمیشن در تمام مدت اجرا ، با سرعت ثابت اجرا شود

به صورت عملی مشاهده کنید

  •  ease

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

به صورت عملی مشاهده کنید

  •  ease-in

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

به صورت عملی مشاهده کنید

  •  ease-out

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

به صورت عملی مشاهده کنید

  •  ease-in-out

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

به صورت عملی مشاهده کنید

 

  •  cubic-bezier(n,n,n,n)

به جای پارامترهایی که با n مشخص شده است اعداد از صفر تا یک قرار دهید و سرعت مورد نظر خود را بسازید

 

 مثال

برای اینکه تفاوت سرعت ها را بهتر درک کنید ، ما 5 تگ دایو با ای دی های div1 , div2, div3,div4,div5 تعریف می کنیم

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

دستورات زیر شلوغ به نظر می رسد زیرا ما برای تمام انواع مرورگرها ان را تکرار کرده ایم

 

 /* W3C and Opera: */
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}
/* Firefox: */
#div1 {-moz-animation-timing-function: linear;}
#div2 {-moz-animation-timing-function: ease;}
#div3 {-moz-animation-timing-function: ease-in;}
#div4 {-moz-animation-timing-function: ease-out;}
#div5 {-moz-animation-timing-function: ease-in-out;}
/* Safari and Chrome: */
#div1 {-webkit-animation-timing-function: linear;}
#div2 {-webkit-animation-timing-function: ease;}
#div3 {-webkit-animation-timing-function: ease-in;}
#div4 {-webkit-animation-timing-function: ease-out;}
#div5 {-webkit-animation-timing-function: ease-in-out;}

 مشاهده و اجرای برنامه کامل
 حالا همین سرعت ها را با دستور cubic-bezier می نویسیم

 

/* W3C and Opera: */
#div1 {animation-timing-function: cubic-bezier(0,0,1,1;}
#div2 {animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {animation-timing-function: cubic-bezier(0.42,0,0.58,1);}
/* Firefox: */
#div1 {-moz-animation-timing-function: cubic-bezier(0,0,1,1;}
#div2 {-moz-animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-moz-animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-moz-animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-moz-animation-timing-function: cubic-bezier(0.42,0,0.58,1);}
/* Safari and Chrome: */
#div1 {-webkit-animation-timing-function: cubic-bezier(0,0,1,1;}
#div2 {-webkit-animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-webkit-animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-webkit-animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-webkit-animation-timing-function: cubic-bezier(0.42,0,0.58,1);}

 مشاهده و اجرای برنامه کامل
ویژگی animation-delay
 از این ویژگی برای ایجاد تاخیر در اجرای انیمیشن استفاده می شود . این زمان برحسب ثانیه (s) یا میلی ثانیه (ms) مشخص می شود

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

Internet Explorer Firefox Opera Google Chrome Safari

مرورگرهای IE9 و قبل از ان از این ویژگی پشتیبانی نمی کنند

برای  مرورگرهای فایر فاکس ، ie10 و اپرا از همین نام animation-delay استفاده می شود

در مرورگرهای وب کیت یعنی کروم و سفاری از پسوند -webkit- استفاده می شود

 از مقادیر منفی نیز می توانید برای مشخص کردن زمان تاخیر اجرای انیمیشن استفاده کنید
 روش نوشتن دستور :
animation-delay: time;
 مقدار پیش فرض این پارامتر صفر است یعنی اجرای انیمیشن هیچ تاخیری نداشته باشد
 به صورت عملی مشاهده کنید

 اگر مقدار این ویژگی را منفی دهید چه می شود ؟

فرض کنید کل زمان اجرای انیمیشن را 5 ثانیه در نظر گرفته ایم

حالا اگر مقدار ویژگی animation-delay را -2 بدهیم ان وقت زمان اجرای انیمیشن شما 2 دقیقه اول ان را نخواهید دید

البته این تاثیر فقط روی دور اول اجرای انیمیشن خواهد بود

در دورهای بعد که انیمیشن تکرار می شود شما از ثانیه اول انرا خواهید دید

 
 مشاهده و اجرای برنامه کامل
 
ویژگی animation-iteration-count
 تعداد دفعات تکرار انیمیشن را مشخص می کند

 مرورگرهایی که از این دستور پشتیبانی می کنند عبارت اند از :

Internet Explorer Firefox Opera Google Chrome Safari

در مرورگرهای فایر فاکس و اپرا و IE10 از دستور animation-iteration-count استفاده می شود

در مرورگرهای کروم و سفاری از دستور  زیر استفاده می شود

-webkit-animation-iteration-count

 این ویژگی در مرورگرهای ie9 و قبل از ان پشتیبانی نمی شود

 مقدار پیش فرض برای ویژگی animation-iteration-count برابر یک است . یعنی انیمیشن فقط یک بار اجرا شود

 

 روش استفاده از ویژگی animation-iteration-count :
 
animation-iteration-count: value;

به دو روش می توانید مقدار ویژگی animation-iteration-count را مشخص نمائید :

  • روش اول :

 به جای value عددی را قرار دهید که می خواهید انیمیشن به تعداد ا ن تکرار شود مثلا عدد 5 یعنی انیمیشن 5 بار پشت سر هم تکرار شود

 

  • روش دوم :

اما اگر به جای value مقدار infinite قرار دهید ، انیمیشن بدون توقف برای همیشه تکرار خواهد شد

 بصورت عملی مشاهده کنید
 

ویژگی animation-direction
 با این ویژگی مشخص می کنید بعد از یک بار اجرای انیمیشن ایا تکرار ان در جهت عکس جرکت دور اول انجام شود یا نه
 

 مرورگرهایی که از این دستور پشتیبانی می کنند عبارت اند از :

Internet Explorer Firefox Opera Google Chrome Safari

در مرورگرهای فایر فاکس و اپرا و IE10 از دستور animation-direction استفاده می شود

در مرورگرهای کروم و سفاری از دستور  زیر استفاده می شود

-webkit-animation-direction

 برای این ویژگی می توان مقادیر زیر را در نظر گرفت :
  •  normal
انیمیشن باید در همان مسیری که مشخص شده اجرا شود . اگر انیمیشن تکرار می شود ، تکرار ان هم باید در مسیر اصلی باشد نه معکوش
  •  alternate
انیمیشن در دور اول در جهت مسیر اصلی انجام می شود و در دور بعد  بصورت معکوس یعنی از اخر به اول انجام می شود  و همینطور ادامه می یابد
 مشاهده و اجرای برنامه کامل

ویژگی animation-play-state
 این ویژگی مشخص می کند که انیمیشن چه وقت اجرا شده و چه وقت اجرای ان متوقف شود
 

 مرورگرهایی که از این دستور پشتیبانی می کنند عبارت اند از :

Internet Explorer Firefox Opera Google Chrome Safari

در مرورگرهای فایر فاکس و اپرا و IE10 از دستورanimation-play-state استفاده می شود

در مرورگرهای کروم و سفاری از دستور  زیر استفاده می شود

-webkit-animation-play-state

 مقادیری که می توان برای این ویژگی بکار برد عبارت است از :
  •  paused
اجرای انیمیشن را متوقف می کند
  •  running

اجرای انیمیشن متوقف شده را از سر می گیرد

 
 مشاهده و اجرای برنامه کامل