آموزش طراحی وب

keyframes@ در CSS3

در این جلسه ی آموزشی ایجاد انیمیشن با @keyframes رو بهتون آموزش میدم .

CSS

فصل چهارم : Properties در CSS

جلسه هجدهم   : keyframes@ در CSS3

سلام به همراهان همیشگی مدرسه مجازی ایرانیان

در این جلسه ی آموزشی ایجاد انیمیشن با @keyframes رو بهتون آموزش میدم .

keyframes@ در CSS3

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

قاعده ی دستوری خاصیت  keyframes@

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

keyframes-selector : با استفاده از این انتخاب گر شما مشخص می کنید ، که در طول انیمیشن در نقاط مختلف چه اتفاقاتی بیوفته . از مقادیر زیر استفاده میشه :

۰ – ۱۰۰% : میتونیم درصد بندی کنیم .

Form: خاصیت مورد اول و مقدار اول که برابر با همون ۰ هست .

To : خاصیت مورد دوم و مقدار دوم که برابر  با همون  ۱۰۰% هست .

حالا با ذکر مثال این موضوع رو باز می کنیم : در این مثال ما میخوایم یه مربع ساده رسم کنیم که در ابتدا آبی باشه و در طی ۳ ثانیه به رنگ قرمز تبدیل بشه . در ابتدا ما این مربع رو ترسیم می کنیم :

تا اینجا ما یه مربع ساده داریم ، حالا میخوایم در طی ۳ ثانیه این مربع از آبی به قرمز تبدیل بشه ، اسم ساختار انیمیشنمون رو animateBox میذاریم ، در نقطه ی اول رنگ مربع آبیه و در نقطه ی پایانی به قرمز تبدیل میشه و مجددا به اول برمیگرده و این عمل رو تکرار میکنه :

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

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

در این مثال طی سه ثانیه رنگ باکس ما به ۴ رنگ متفاوت تغییر میکنه .

پشتیبانی مرورگرها از خاصیت  @keyframes در CSS3

در حال حاضر فقط مرورگرهای زیر این خاصیت رو پشتیبانی می کنند : IE10+ , Firefox , Chrome , safari , Opera

 

دوستان در اینجا جلسه ی آموزشیمون به اتمام میرسه میتونید دموی آنلاین این جلسه رو هم ببینید  .

موفق و پاینده باشید 🙂

تهیه شده در مدرسه مجازی ایرانیان

حسین همت یار

نویسنده در مدرسه مجازی ایرانیان ، دانشجوی رشته IT ، طراح وب و علاقه مند به تازه های دنیای اینترنت و وب و البته لینوکس

دیدگاه ۶

  • ممنون از آموزش خوبتون.
    اگه لطف کنین و بقیه خواص انیمیشن رو هم توضیح بدین خیلی بهتر میشه.خواصی مثل:
    animation-delay
    animation-direction
    animation-timing-function
    animation-fill-mode
    animation-play-state

  • با سلام و خسته نباشید
    آیا در مثال اول که رنگ از آبی به قرمز تغییر پیدا میکرد میتونستیم از transition به جای @keyframe استفاده کنیم؟

    • سلام دوست عزیز

      در transition شما نمیتونید انیمیشن ایجاد کنید ، فقط میتونید تغییرات رو مثلا در حالت hover با افکت انجام بدید .

      موفق باشید

آیا سوالی دارید؟

پنل کاربران

بستن
*
*

نظرسنجی

به کدام دسته موضوعی علاقه مند هستید؟

آخرین پرسش و پاسخ ها

اموزش تصادفی

خبرهای باحال دریافت کن

خبرهای باحال دریافت کن

ما هم مثل شما از دریافت ایمیل های مزاحم خوشمون نمیاد. فقط مطالب جدید و خبرهای ویژه رو به اطلاع شما میرسونیم. قول میدیم اسپم نکنیم :)

ثبت نام انجام شد ، لطفا ایمیلی که براتون ارسال میشه رو تایید کنین