ایجاد انیمیشن در css

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

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

در این مقاله قصد بررسی راهکاری را داریم تا توسط آن به راحتی بتوانید به خلق انیمیشن برای سایت اقدام نمایید.

انیمیشن در css چیست؟

انیمیشن به عملی گفته میشود که طی آن یک عنصر از حالتی به حالت دیگر تغییر شکل و ماهیت دهد.در این مورد میتواند زمان اعمال این افکت را به عنصر مورد نظر بدهید بعنوان مثال تعیین نمایید که عنصر عکس به مدت 5 ثانیه بشکل متناوب بچرخد.

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

در گذشته این قابلیت تنها توسط کد های جاوا اسکریپت عملی بود اما با پیشرفت امکانات در CSS قابلیت انیمیشن سازی را در CSS3 میتوانید بکار گیرید.

یکی از معروفترین و محبوبترین کتابخانه های CSS را داریم که توسط آن میتوان به خلق انواع انیمیشن در CSS3 است.نام این کتابخانه محبوب Animate.css است.در این کتابخانه بیش از 50 افکت برای ساخت انواع تصاویر متحرک وجود دارد که این قابلیت را دارد که انیمیشن را بر روی انواع تصاویر ،نوشته ها ،فرم ها و … بکار ببرید.

علاوه بر این برای ایجاد انیمیشن ابتدا لازم است که با مفهومی بنام keyframes آشنا شوید.اگر css را به صورت کامل نمی شناسید ، پیشنهاد می کنیم در کلاس آموزش html/css  شرکت نمایید.

Keyframes جایی است که در آن انمیمیشن ساخته میشود.عناصر در آن از یک Style به یک Style دیگر تبدیل میشوند.بعنوان مثال تعیین میکنید که یک پس زمینه از یک خاصیت مانند زرد به خاصیت دیگری مانند قرمز تغییر وضعیت دهد. و یا یک عنصر از شکل مربع به وضعیت دیگیر مانند دایره تغییر شکل دهد.

بطور کلی قابلیت @keyframes توسط مرورگرهای فایرفاکس ،اپرا و اینترنت اکسپلورر قابل پشتیبانی است.اما در مرورگر های Safari  و  Chrome برای این منظور نیاز به پیشوند webkit است.

نکته مهم این است که Internet Explorer 9 و قبل از آن از این قابلیت پشتیبانی نمیکند.

بعنوان مثال قطعه کد زیر برای متحرک سازی بکار میرود:

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background: red;}
to {background: yellow;}
}

در انیمیشن سازی میتوانید تغییر وضعیت ها را با from و to مشخص نمایید.و یا با درصد مشخص نمایید .بدین منظور حالت ابتدایی را 0% و حالت نهایی را با 100% مشخص نمایید.

بعنوان مثال در قطعه کد زیر تغییر وضعیت از رنگ بکگراند از قرمز به سبز را نمایش میدهد.مدت زمان آن 5 ثانیه است و در 25%از زمان رنگ به زرد و در 50% ثانیه زمان به آبی و پس از اتمام زمان بکگراند ما سبز خواهد شد:

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

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}