cssblog.ir logo
P

css-animations

نحوه استفاده از انیمیشن در زبان CSS

با استفاده از مشخصه animation در CSS می توان روی بسیاری از مشخصه های CSS انیمیشن تعیین کرد و آن ها را با انیمیشن تغییر داد.

با استفاده از مشخصه animation در CSS می توان برای بسیاری از مشخصه های CSS انیمیشن تعیین کرد و آن ها را با انیمیشن تغییر داد. مثلا ما می‌توانیم رنگ پس زمینه یک عنصر را به چند رنگ در مدت زمان دلخواه تغییر دهیم و در آخر مجددا رنگ را به رنگ اولیه باز گردانیم.

تفاوت انیمیش با transition

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

نحوه استفاده از انیمیشن

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

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


@keyframes rotate {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);	
	}
}

*‌ کلمه ای که پس از @keyframes می نویسیم، نام انیمیشن است. (در اینجا rotate)

مقادیر ۰٪ و ۱۰۰٪ به عبارتی بیانگر نقطه آغاز و پایان انیمیشن می‌باشند. در مثال فوق، در هنگام تعریف انیمیشن بیان می‌کنیم که در آغاز چرخش برابر با ۰ و در پایان برابر با ۳۶۰ درجه باشد. 

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

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

برای استفاده از انیمیشن فوق، CSS زیر را می نویسیم:


span {
    display: inline-block;
    animation: rotate 2s infinite;
}

* display: inline-block صرفا بدلیل انجام شدن عمل چرخش نوشته شده است.

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

 در هنگام تعریف @keyframes دو مقدار 0% و 100% را می‌نویسیم که بیانگر این است که انیمیشن در آن میزان از پیشرفت (progress) یا لحظه، چه حالتی خواهد داشت. مثلا ما می توانیم بجای ۰ و ۱۰۰ طول مدت زمان انیمیشن را به ۴ قسمت ۰ و ۲۵ و ۵۰ و ۱۰۰ تقسیم کنیم. مانند:


@keyframes changeColor {
	0% {
		background-color: blue;
	}
	25% {
		background-color: red;
	}
	50% {
		background-color: green;
	}
	100% {
		background-color: yellow;
	}
}

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

 همانطور که مشاهده می کنید انیمیشن فوق دارای ۴ حالت است که از ابتدا تا پایان یک به یک اجرا می شوند. 

تعریف یکجای وضعیت‌های یکسان

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


@keyframes changeColor {
	0%,100% {
		color: green;
	}
	50% {
		color: yellow;
	}
}

در مثال فوق ۰٪ و ۱۰۰٪ ادغام شده اند و برخلاف مثال قبل، بصورت یکجا نوشته شده‌اند. 

لیست مشخصه های انیمیشن

هر انیمیشن از مشخصه های زیر را دارد که هرکدام قابل تنظیم هستند که لیست آنها در این قسمت مشاهده می نمائید:

نام مشخصه کاربرد
animation-name نام انیمیشنی که قصد استفاده از آن را داریم که همان نامی است که در هنگام تعریف و در کنار @keyframes نوشته شده است
animation-duration زمانی که طول می کشد هر چرخه از انیمیشن اجرا شود
animation-timing-function تعیین نحوه زمان بندی اجرا انیمیشن بر اساس چه تابعی است مانند ease  یا linear
animation-delay تاخیری که بین لود شدن عنصر و اجرای انیمیشن 
animation-direction جهت اجرای انیمیشن که بصورت پیشفرض پس از هر بار اجرا ریست می شود
animation-iteration-count تعداد دفعاتی که انیمیشن باید اجرا شود
animation-fill-mode تعیین اینکه مقادیر قبل/بعد انیمیشن اعمال شوند. برای مثال شما می توانید تعیین کنید که آخرین حالت انیمیشن در صفحه باقی بماند.
animation-play-state توقف/پخش انیمیشن

این مشخصه ها را می توان بصورت جداگانه استفاده نمود یا همه را بصورت یکجا (حالت shorthand) از طریق مشخصه animation تعریف نمود. به بیان دیگر مشخصه animation از زیرمشخصه های فوق تشکیل می شود. 

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

مقدار های قابل قبول Property
ease, ease-out, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) (e.g. cubic-bezier(0.5, 0.2, 0.3, 1.0)) animation-timing-function
واحدهای زمان به ثانیه (s) یا میلی ثانیه (ms) مانند 2s یا 300ms animation-duration
واحدهای زمان به ثانیه (s) یا میلی ثانیه (ms) animation-delay
عدد تعداد دفعات تکرار مثلا 3 animation-iteration-count
forwards, backwards, both, none animation-fill-mode
normal, alternate animation-direction
paused, running animation-play-state

می توان تمام مقادیر در حالت shorthand بصورت یکجا نوشت:


@keyframes sample {
	
}

.item-1 {
	animation-name: sample;
	animation-duration: 2s;
	animation-timing-function: ease-out;
	animation-delay: 0s;
	animation-direction: alternate;
	animation-iteration-count: infinite;
	animation-fill-mode: none;
	animation-play-state: running;
}

.item-2 {
	animation: sample 2s ease-out 0s alternate infinite none running;
}

در مثال فوق نتیجه اجرای آنچه برای .item-1 نوشته شده دقیقا برابر با .item-2 خواهد بود. 


نحوه تعیین چند انیمیشن بصورت یکجا:

جالب است بدانید که می توان با استفاده از کاما (,) چند انیمیشن را بصورت یکجا تعیین کرد. تنها کافی است انیمیشن ها را با کارکتر کاما (ویرگول انگلیسی) جدا کنیم‌: 


.circle {
	animation: rotate 2s linear infinite, color 2s ease infinite;
}

به کدام مشخصه ها را می توان انیمیشن داد؟

نکته مهم درباره انیمیشن ها این است که تمام مشخصه ها قابلیت انیمیشن داشتن را ندارند. در اینجا می توانید لیست این مشخصه ها را مشاهده کنید. مشخصه هایی که قابلیت انیمیشن داشتن را دارا هستند، اغلب دارای مقادیری عددی و رنگها می باشند و مشخصه ای مانند background-image قابلیت انیمیشن را ندارد. 

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

تاکنون <% totalComments %> دیدگاه برای این مطلب ثبت شده است.

تاکنون دیدگاهی ثبت نشده است. شما می توانید اولین شخصی باشید که دیدگاه خود را ارسال می کند

<% errorMessage %>

<% comment.name %>

avatar
<% comment.comment_replies.length %> پاسخ برای این دیدگاه ثبت شده است

<% reply.name %>

avatar

ارسال دیدگاه جدید

برای ارسال دیدگاه یا پرسش جدید از طریق فرم زیر اقدام کنید.

ارائه پاسخ به دیدگاه

شما در حال پاسخ دادن به دیدگاه «<% replyComment.name %>» هستید. انصراف از پاسخ

  • <% s %>
  • <% e %>

نکاتی درباره دیدگاه ها

  1. برای حذف کپچا (عبارت امنیتی) وارد اکانت خود شوید
  2. شما می توانید از markdown داخل کامنت خود استفاده کنید (اطلاعات بیشتر)
  3. دیدگاه ها قبل از نمایش نیازمند تائید می باشند