آموزش دستور keyframes در CSS

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش دستور keyframes در CSS با من همراه باشید.

آموزش دستور keyframes در CSS

Free-Learn

دستور keyframes در CSS

با استفاده از قانون / دستور keyframes@ در CSS میتوان رَوال یا نحوه اجرای انیمیشن ها را تعریف کرد، مثلا میتونیم مشخص کنیم یک باکس در مدت زمان ۵ ثانیه از فلان رنگ به فلان رنگ تغییر پیدا کند و..

ما میتوانیم به راحتی از دیگر ویژگی های CSS در این دستور استفاده نماییم و نحوه اجرای انیمیشن را کنترل نماییم، همچنین باید یک نام برای انیمیشن با استفاده از ویژگی animation مشخص نماییم و سپس همین نام را به keyframes@ متصل نماییم.

انیمیشن ها برای اجرا شدن نیاز به ۲ نقطه اصلی ، نقطه شروع یا مبدا و نقطه پایان یا مقصد دارند که این نقاط با استفاده از کلمات کلیدی زیر مشخص میشوند :

  • from – 0%
  • to – 100%

یعنی از from یا ۰% شروع شو و به نقطه to یا ۱۰۰% برو، که به راحتی میتوانیم از ویژگی های CSS در این نقاط استفاده نماییم، مثلا بگیم from از رنگ زمینه آبی و to به رنگ زمینه قرمز تغییر رنگ بده.

Free-Learn

مثال از این دستور

در ادامه میتوانید یک مثال از دستور keyframes@ را در زبان CSS مشاهده نمایید.

مثال شماره ۱ : استفاده از کلمات کلیدی from و to

امتحان کنید

مثال شماره ۲ : استفاده از درصد ( ۰% تا ۱۰۰% )

امتحان کنید

مثال شماره ۳ : تغییر رنگ پس زمینه از رنگ های مختلف در یک مدت زمان مشخص

امتحان کنید

مثال شماره ۴ : انیمیشن حرفه ای ( گذر زمان )

امتحان کنید

مثال شماره ۵ : انیمیشن حرفه ای ( حرکت مورچه ها )

امتحان کنید

مثال شماره ۶ : انیمیشن حرفه ای ( اسلایدر تصاویر )

امتحان کنید

Free-Learn

جدول مشخصات دستور keyframes در CSS

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

مقدار پیش فرض
قابل ارث بری
قابل متحرک سازی
نسخه CSS3
نحوه استفاده در جاوااسکریپت

Free-Learn

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

در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از دستور keyframes@ در CSS پشتیبانی میکنند یا خیر.

» عددی که در کنار -webkit- و -moz- وجود دارد ، یعنی از آن نسخه به بالا باید از این پیشوندها استفاده نمایید. ( درباره پیشوندها بیشتر بخوانید )

نام دستور / قانون Chrome Firefox Opera Safari IE
keyframes@ ۴۳٫۰
۴٫۰ -webkit-
۱۶٫۰
۵٫۰ -moz-
۳۰٫۰
۱۵٫۰ -webkit-
۹٫۰
۴٫۰ -webkit-
۱۰٫۰

Free-Learn

شکل نوشتاری

نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این دستور در CSS بصورت زیر می باشد.

Free-Learn

جدول مقادیر دستور keyframes در CSS

در جدول زیر میتوانید، مقادیری را که میتوان در این دستور استفاده کرد مشاهده نمایید.

مقدار توضیح
Animation_Name نام انیمیشن را مشخص میکند ( ضروری )
Keyframes_Selector استفاده از کلمات کلیدی From و To
یا استفاده از ۰% تا ۱۰۰% برای مشخص کردن نوار اجرای انیمیشن
( ضروری )
CSS_Styles دستورات CSS که باید در حین اجرای انیمیشن بروی عناصر اعمال شوند

Free-Learn

دستور important! در keyframe

با استفاده از دستور important! در keyframe میتوان از اجرای یک یا چندین قانون ( همون چیزی که قرار است با استفاده از انیمیشن اجرا شود ) جلوگیری کرد.

مثال : در مثال زیر باکس باید اول رنگش آبی باشه بعدش قرمز بشه و در نهایت زرد بشه ولی با استفاده از دستور important! دیگه باکس قرمز نمیشه. ( یعنی عملا اون بخش نادیده گرفته میشه )

امتحان کنید

Free-Learn

نکات و توضیحات

  • توجه داشته باشید که حتما مقدار درصدی وارد کنید مثله ۱۰% و حتما درصدش رو قرار دهید، چون بیشترین سازگاری مرورگرها با درصدها می باشد و سعی کنید از from و to استفاده نکنید.
  • دیگه از ۰ تا ۱۰۰ درصد به دلخواه خودتون میتونید نقطه مبدا و مقصد برای اجرای انیمیشن ایجاد نمایید، مثال :

  • برخی از مرورگرها در نسخه های قدیمی تر از این دستور پشتیبانی نمی کنند لذا باید برای حل این مشکل از یسری دستورات پیشوندی از نسخه مشخص شده آن مرورگر ( که در جدول پشتیبانی مرورگرها مشخص شده ) استفاده نمایید.
  • -webkit- برای مرورگر کروم و سافاری و اُپرا
  • -moz- برای مرورگر موزیلا فایرفاکس

Free-Learn

دریافت PDF یا پرینت این مطلب