جلسه ی سی و یکم: خصوصیت Keyframes در CSS

خصوصیت keyframes

در این جلسه از جلسات طراحی سایت می خواهیم به آموزش خصوصیت Keyframes در زبان CSS بپردازیم.

خصوصیت Keyframes چیست؟

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

یکی دیگر از راه های ایجاد انیمیشن در CSS3 خصوصیت Keyframes می باشد. با استفاده از این خصوصیت شما می توانید یک انیمیشن حرفه ای در زبان CSS ایجاد نمایید. برای استفاده از این خصوصیت ابتدا باید بیاموزیم چگونه باید از آن استفاده نماییم.

 

چگونه از خصوصیت Keyframes استفاده کنیم؟

برای استفاده از خصوصیت Keyframes در زبان نشانه گذاری CSS ابتدا باید از علامت @ استفاده کنیم. به وسیله ی علامت @ می توانیم می توانیم خصوصیت Keyframes را فرا خوانی کنیم. به نمونه کد زیر توجه کنید:

@keyframes

پس از فراخوانی این خصوصیت باید یک نام برای آن انتخاب کنیم پس ، پس از  @Keyframes نام انیمیشن مورد نظر را می نویسیم. به نمونه کد زیر توجه کنید:

@keyframes kamyabiha

حال که با فراخوانی این خصوصیت آشنا شدید لازم است که نحوه ی استفاده از این خصوصیت را نیز یاد بگیرید. این خصوصیت از دو حالت from و to تشکیل شده اس که از حالت from برای شروع انیمیشن و از حالت to برای اتمام آن استفاده می شود. البته نا گفته نماند که از اعداد صفر تا صد درصد نیز می توان استفاده کرد اما همیشه باید با ۰% شروع و با ۱۰۰% پایان یابد. به نمونه کد زیر توجه کنید:

@keyframes kamyabiha {

۰%{ }

۱۰۰%{ }

}

یا

@keyframes kamyabiha {

from{ }

to{ }

}

نکته: برای پشتیبانی بهتر مرورگر ها از کد مورد نظر ما بهتر است که از درصد ها به جای کلمات to و from استفاده کنیم.

 

به طور کلی برای ایجاد انیمیشن از طریق خصوصیت Keyframes از یکی از دو حالت بالا استفاده می کنیم اما ناگفته نماند که از طریق درصد ها می توانیم انیمیشن خود را به قسمت های بسیاری تبدیل کنیم. به نمونه کد زیر توجه کنید:

@keyframes kamyabiha {

۰% { }

%۲۵ { }

۵۰% { }

۷۵% { }

۱۰۰% { }

}

نحوه ی اتصال انیمیشن به عنصر مورد نظر ما در CSS

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

ابتدا نام انیمیشن سپس مدت زمان آن و در آخر نوع نمایش آن را می نویسیم. به نمونه کد زیر دقت کنید:

.box {

position: relative;

animation: kamyabiha 5s infinite;

}

@keyframes kamyabiha {

۰% { }

۱۰۰% { }

}

 

یک مثال ساده برای خصوصیت Keyframes

حال که عموما کار با خصوصیت Keyframes را فرا گرفته اید بیاید با یک مثال ساده نحوه ی کارایی آن را ببینیم. به نمونه کد زیر دقت کنید:

کد HTML:

<div class="box"></div>

کد CSS:

.box {

width: 100px;

height: 100px;

background: red;

position: relative;

animation: kamyabiha 5s infinite;

}

@keyframes kamyabiha {

۰% {top:20px}

۱۰۰% {top:200px }

}

درنمونه کد بالا ما یک باکس در ابعاد ۱۰۰px در ۱۰۰px به رنگ قرمز را داریم که پس اجرا و بارگذاری صفحه شروع به حرکت میکند. این باکس در ابتدا ۲۰px از بالا ارتفاع داشته سپس به ارتفاع ۲۰۰px در مدت پنج ثانیه می رسد.

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

کد HTML:

<div class="box"></div>

کد CSS:

.box {

width: 100px;

height: 100px;

background: red;

position: relative;

animation: kamyabiha 5s infinite;

}

@keyframes kamyabiha {

۰% {top:20px; background-color: : red}

۱۰۰% {top:200px;  background-color: yellow}

}

در نمونه کد بالا مربع مورد نظر ما علاوه بر حرکت به سمت پایین رنگ آن از قرمز به رنگ زرد نیز تغییر می کند. اما این تغییر بصورت یکجا و ناگهانی نیست و در طول زمان و به آرامی انجام می شود که باعث شده تصویر مورد نظر ما مانند یک انیمیشن عمل کند.

 

اجرای مداوم یک انیمیشن در خصوصیت Keyframes

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

کد HTML:

<div class="box"></div>

کد CSS:

.box {

width: 100px;

height: 100px;

background: red;

position: relative;

animation: kamyabiha 5s infinite;

}

@keyframes kamyabiha {

۰% {top:20px; background-color: : red ; right: 20px}

۲۵% {top:20px; right: 200px}

۵۰% {top:200px; right: 200px;  background-color: yellow}

۷۵% {top:200px; right: 20px}

۱۰۰% {top:20px;  right: 20px ; background-color: red}

}

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

 

تفاوت خصوصیت Keyframes و خصوصیت Transition

شاید به خود فکر کنید که چرا برای ایجاد یک انیمیشن بهتر است از خصوصیت Keyframes استفاده کنیم و به خصوصیت Transition بسنده نکنیم؟؟ در جواب این سوال باید بگوییم که با استفاده از خصوصیت Transition فقط می توانیم زمان و نحوه ی اجرای انیمیشن را نشان دهیم. اما با استفاده از خصوصیت Keyframes می توانیم علاوه برا این موارد بالا خصوصیت های متنوع نیز به عنصر خود اضافه کنیم مانند تغییر رنگ جا به جایی یا بزرگ نمایی و …

دلیل دیگر استفاده از خصوصیت Keyframes این است که پس از تمام شدن انیمیشن متوقف نمی شود و همین طور به صورت مداوم ادامه می یابد اما زمانی که از خصوصیت Transition استفاده می کنیم پس از یکبار اجرا انیمیشن ما می ایستد تا دوباره به انیمیشن دستور اجرا بدهیم.

 

مبحث تکمیلی

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

در صورتی که میخواهید مثال های بیشتری ببینید و متوجه رفتار آن ها شوید کافیست بر روی متن رو به رو کلیک کنید. (برای دیدن مثال های بیشتر کلیک کنید)

 

خلاصه مطلب

  1. یکی دیگر از راه های ایجاد انیمیشن در CSS3 خصوصیت Keyframes می باشد.
  2. برای استفاده از خصوصیت Keyframes در زبان نشانه گذاری CSS ابتدا باید از علامت @ استفاده کنیم.
  3. پس از اینکه انیمیشن مورد نظر خود را ایجاد نمودیم و برای آن یک نام انتخاب کردیم کافیست از طریق خاصیت Animation آن را به عنصر مورد نظر خود متصل کنیم.
  4. دلیل استفاده از خصوصیت Keyframes این است که پس از تمام شدن انیمیشن متوقف نمی شود و همین طور به صورت مداوم ادامه می یابد.
ابوالفضل کلهری

فعال در زمینه های ui و ux و طراحی وب سایت مسلط به زبان های نشانه گذاری HTML و CSS و همچنین در زمینه ی آموزش زبان های HTML و CSS نیز فعالیت دارم . امیدوارم با آموزش هایی که در این سایت قرار می دهم موجب پیشرفت شما عزیزان باشم.

دیدگاه ها
  • قبل از ارسال دیدگاه خود قوانین بخش دیدگاه ها را مطالعه کنید. ارسال دیدگاه به معنی پذیرش این قوانین است. قوانین بخش دیدگاه ها