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

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

دسته بندی موضوعات
سفارش تبلیغات

keyframes@ در CSS3

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

 

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

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

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

دموی آنلاین

<<

>>

اگر این آموزش برای شما مفید بود با دوستان خود به اشتراک بگذارید



سفارش تبلیغات

گردآوری و تالیف : میترا رحیمی

بنیانگذار و نوسنده در مدرسه مجازی ایرانیان و سردبیر ماهنامه طراحی وب همچنین مدرس و مسلط به برنامه نویسی سمت سرور با PHP MVC و برنامه نویسی سمت کلاینت با html 5 , css3 , jquery , مبانی سئو و سیستم مدیریت محتوای وردپرس

خوراک خوشمزه و علمی روزانه
با وارد کردن ایمیلتون در فیلد روبرو آموزش های جذاب و vip دریافت نمایید

آموزش های مرتبط با این مطلب

دیدگاه های مخاطبین

لطفا تنها دیدگاه خود را در رابطه با این مطلب ارسال نمایید، سوالات را از طریق سامانه پرسش و پاسخ مطرح نمایید. سوالات در دیدگاه ها تایید نخواهد شد.

  • یاشار صفاری

    مثل همیشه عالی و کاربردی

  • hassany

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

  • علیرضا کریمی نژاد

    آموزنده و مفید بود
    ممنون

  • امیر

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

    • میترا رحیمی

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

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

      موفق باشید

  • yousef

    سلام
    ممنون از این که این مطلب را گذاشتین
    من خیلی از این مطلب استفاده بردم
    ممون ازش ما

وبلاگ مدرسه

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

مدرسین مدرسه

  • حسین همت یار

    حسین همت یار

    مدرس ، طراح رابط کاربری وب و موبایل با 8 سال سابقه ی فعالیت حرفه ای

سوابق کامل

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

آخرین پرسش و پاسخ ها
شما هم سوالی دارید ؟