animate in css

انیمیشن در css

در css3 ویژگی به نام animation اضافه شده است که شما با استفاده از آن قادر به ساخت تصاویر متحرک و انیمیشن های ساده برای المان های مختلف خواهید بود. این ویژگی css می تواند جایگزین خوبی برای تصاویر انیمیشن ، فلش و جی کوئری باشد . در زیر ویژگی های مورد استفاده در انیمیشن css را می توانید مشاهده کنید.

 

ویژگی های انیمیشن در ccs3

ویژگی توضیحات
@keyframes مشخص کردن نوع حرکت انیمیشن
animation تنظیم تمام ویژگی های انیمیشن به صورت یکجا
animation-delay یک تاخیر برای شروع یک انیمیشن مشخص می کند
animation-direction تغییر جهت انیمیشن در هر دور را مشخص می کند
animation-duration تنظیم مدت زمانی که یک انیمیشن برای تکمیل یک چرخه باید انجام دهد
animation-fill-mode یک سبک برای قبل و بعد از انیمیشن تنظیم می کند
animation-iteration-count تعداد دفعات تکرار یک انیمیشن را تعیین می کند
animation-name نام یک انیمیشن را مشخص می کند
animation-play-state مشخص می کند که یک انیمیشن اجرا یا متوقف شود
animation-timing-function منحنی سرعت انیمیشن را مشخص می کند

نحوه ساختن انیمیشن

برای ساختن انیمیشن css ابتدا باید با قانون keyframes@ آشنا شوید.

قانون keyframes@ در css3 :

در واقع شما در داخل keyframes@ ها مشخص می کنید که در یک زمان معین چه تغییراتی در style یک المان ایجاد شود.

به طور کلی keyframes@ ها به این دو صورت نوشته می شوند :

  • @keyframes animatedName{
  • from{width:10%;backgroun:red;}
  • to{width:80%;backgroun:green;}
  • }
  • @keyframes animated{
  • 0%{width:10%;background:red;}
  • 25%{width:30%;background:green;}
  • 50%{width:50%;background:blue;}
  • 75%{width:60%;background:yellow;}
  • 100%{width:80%;background:green;}
  • }

توجه animatedName نام انتخابی شما برای انیمیشن می باشد.
در روش اول انیمیشن در دو مرحله اجرا می می گردد، که (from) شروع و (to) پایان انیمیشن را مشخص می کنند. در روش دوم یک انیمیشن را می توان در چند مرحله اجرا نمود به ترتیب از 0% تا 100% آن. همچنین در دو روش داخل { } تغییرات مورد نظر در هر مرحله را می نویسیم.

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

keyframes@ در مرورگر chrome و microsoft edge با پیشوند -webkit- پشتیبانی می شود. و در مرورگر های opera و mozilafirefox به ترتیب با پیشوند های -o- و -moz- قابل پشتیبانی است.

یعنی به صورت زیر :

  • @-webkit-keyframes
  • @-o-keyframes
  • @-moz-keyframes

استفاده از انیمیشن css در عناصر html :

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

برای این کار به صورت زیر عمل می کنیم :

  • div{
  • animation: name duration timing-function delay iteration-count direction fill-mode play-state;
  • }

همانطور که در فوق مشخص می باشد برای animation می توانیم چندین مقدار را به صورت یکجا در نظر بگیریم که در زیر مهمترین آن ها را معرفی می کنیم.
animation-name که همان نامی است که برای keyframes@ انتخاب کرده ایم.

animation-duration که مدت زمان اجرای انیمیشن را بر حسب ثانیه مشخص می کند.

animation-timing-function که سرعت اجرای انیمیشن را تعیین می کند. و دارای چهار حالت پیش فرض (linear) (ease) (ease-in) (ease-in-out) است.

animation-delay که برابر با تاخیر در اجرای انیمیشن بعد از باز شدن صفحه و بر حسب ثانیه می باشد.

animation-iteration-count که تعداد دفعات اجرای انیمیشن را مشخص می کند. اگر این مقدار برابر (infinite) باشد، انیمیشن همواره تکرار می شود.

animation-direction که نحوه حرکت انیمیشن را مشخص می کند. و دارای سه حالت (alternate-reverse) (reverse) (alternate) است.

توجه مقدار animation-play-state به صورت پیش فرض برابر running است. و اگر آن را رو paused تنظیم کنید انیمیشن متوقف می شود.

توجه  تنظیم animation-name و animation-duration الزامی بود و بدون نوشتن آن ها انیمیشن اجرا نمی شود.

همچنین بخوانید...!

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *