طراحی وب: ۸- انیمیشن

انیمیشن در CSS امکان تغییر پراپرتی‌های یک المنت را در زمان معین و با سرعت دلخواه می‌دهد.

مزایای انیمیشن CSS نسبت به جاواسکریپت

• نیازی به یادگیری و به کاربردن جاواسکریپت نیست.
• با لگ کمتری نمایش داده می‌شود. (حتی در کامپیوترهای ضعیف)

راه اندازی یک انیمیشن در CSS دو بخش دارد.

• تعریف
• کاربرد

تعریف انیمیشن

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

@keyframes to-circle {
	0% {
		border-radius:0%;
	}
	20% {
		border-radius:10%;
	}
	40% {
		border-radius:20%;
	}
	60% {
		border-radius:30%;
	}
	80% {
		border-radius:40%;
	}
	100% {
		border-radius:50%;
	}
}

• نام انیمیشن
• گام‌های انیمیشن
• پراپرتی‌های هر گام

در تعیین گام‌ها می توانید بجای 0% از from و بجای 100% از to استفاده کنید.

پراپرتی‌های انیمیشن

برای تعیین شیوه‌ی کار انیمیشن چند پراپرتی وجود دارد.

• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-iteration-count
• animation-direction
• animation-fill-mode
• animation-play-state

animation-name

ابتدا باید انیمیشنی را  که می‌خواهید اجرا شود، مشخص کنید.

@keyframes zoom-in {
	from {
	  opacity: 0;
	  transform: scale(0.2, 0.2);
	}
	to {
	  opacity: 1;
	}
}
img {
	animation-name: zoom-in;
}
img:active {
	animation-name: none;
}

animation-duration

مدت زمان انیمیشن را مشخص می کند. واحد زمان s برای ثانیه یا ms برای میلی ثانیه باید حتما نوشته شود. مقدار پیش فرض صفر است.

animation-timing-function

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

animation-delay

قبل از انیمیشن چقدر باید منتظر ماند. واحد زمان s برای ثانیه یا ms برای میلی ثانیه باید حتما نوشته شود. مقدار پیش فرض صفر است.

animation-iteration-count

انیمیشن چند بار تکرار شود. مقدار پیش فرض یکبار است برای اینکه پیوسته تکرار شود، مقدار infinity را به کار برید.

animation-direction

جهت انیمیشن را مشخص می‌کند از آغاز به پایان یا عکس آن.

animation-fill-mode

این پراپرتی مشخص می‌کند قبل و بعد از انیمیشن المنت به چه صورتی نمایش داده شود.

animation-play-state

این پراپرتی مشخص می‌کند انیمیشن اجرا شود یا موقتا متوقف شود.

دستور خلاصه

همه دستورهای بالا را می‌توانید در یک دستور زیر خلاصه کنید.

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

مثال

Flash

@keyframes flash {
	0%,50%,100%  {
		opacity: 1;
	}
	25%,75%  {
		opacity: 0.5;
	}
}

.item {
	animation-name: flash;
	animation-duration: 1s;
}

.item:active {
	animation-name: none;
}

مثال

Square to Circle

@keyframes square-to-circle {
	0%  {
		border-radius:0 0 0 0;
		background: #4285F4;
		transform: rotate(0deg);
	}
	25%  {
		border-radius:50% 0 0 0;
		background: #FBBC05;
		transform: rotate(45deg);
	}
	50%  {
		border-radius:50% 50% 0 0;
		background: #34A853;
		transform: rotate(90deg);
	}
	75%  { 
		border-radius:50% 50% 50% 0;
		background: #EA4335;
		transform: rotate(135deg);
	}
	100% {  
		border-radius:50% 50% 50% 50%;
		background: #000000;
		transform: rotate(180deg);
	}
}
.item {
	animation: square-to-circle 2s .5s infinite cubic-bezier(1,.15,.3,1.35) alternate;
}

تمرین ۱

• این فایل را دانلود کنید.
• آن را در فولدر web2 باز کنید.
• در فایل CSS آن تغییراتی بدهید تا همانند ویدیوی زیر شود.