illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

آموزش CSS (فصل یازدهم – جلسه سوم) : آشنایی با جلوه های ویژه ی CSS3

23824 ۶ خرداد ۹۲

انیمشین


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

@keyframes


برای ساخت انیمشین در css3 ما نیاز داریم که بفهمیم keyframes چیست و چطور عمل می کند؟
در حقیقت در داخل keyframes ما مجموعه کدهایی را که برای ساخت انیمشین نیاز است می نویسیم و در آن حالت اولیه و حالتی که باید یک جزء از صفحه به آن تبدیل شوید را می نویسیم.
کدهای زیر را در نظر بگیرید :

و کد css

حال میخواهیم که رنگ جعبه را با استفاده از @keyframes از سیاه به قرمز تبدیل کنیم.

کد css

بسیار خب، حال ما انیمیشن را ساختیم، anim1 نام انیمشین ما است، from شروع انیمیشن و to پایان انیمیشن را مشخص می کند، که جعبه از سیاه به قرمز تغییر رنگ دهد.
اما هنوز انیمیشن غیر فعال است و کاری انجام نمی دهد. برای ینکه انیمیشن را به جعبه اختصاص دهیم باید از خصوصیت animation استفاده کنیم و به آن حداقل دو مقدار دهیم :
مقدار اول : نام انیمشین که همان anim1 است
مقدار دوم : زمان اجرای انیمشین که بر حسب ثانیه (s) یا میلی ثانیه (ms) می تواند باشد.

کد css :

نتیجه در مرورگر

شیوه زمان بندی انیمشین


در زمان تعریف keyframes ما میتوانیم از from برای تعریف شرایط شروع انیمیشن و از to برای شرایط پایان انیمیشن استفاده کنیم، وقتی از from و to استفاده می کنیم وابسته به مدت زمان تعیین شده، مرورگر به صورت خودکار زمان را طوری تنظیم میکند که از حالت from تا به حالت to در مدت زمان تعریف شده اجرا شود.
بجای from و to ما میتوانیم از % نیز استفاده کنیم. مقدار 0% شروع انیمیشن و مقدار 100% پایان انیمشین را تعیین میکند.
در هنگام استفاده از % ما می توانیم مراحل انمیشین را به 100 قسمت تقسیم کنیم، و در هر قسمت کدهای مورد نظرمان را قرار دهیم
مثال :

به مثال زیر دقت کنید

سایر مقادیر انیمشین


خاصیت انیمیشن به غیر از دو مقداری که نام پارامتر و مدت زمان انیمیشن بود مقادیر دیگری را نیز در بر میگیرد.
قاعده :

name : نام انیمیشن
function : افکت زمانی که یکی از مقادیر زیر را میگیرد

  • ease
  • ease-in
  • ease-out
  • ease-in-out

duration : مدت زمان اجرای انیمشین
count : که فقط مقدار infinite و به معنای تکرار بی نهایت است.
delay : مدت زمان تاخیر قبل از شروع انیمیشن است که مقداری بر حسب زمان را میگیرد.
مثال :

مثال های کاربردی


فایل زیر را دانلود کنید، در داخل آن چند مثال کاربری براتون قرار دادم، که بهتر طریقه استفاده از این خاصیت را فرا گیرید.

بسیار خب اموزش این جلسه نیز به پایان رسید، در جلسه بعدی به معرفی و بررسی برخی دیگر از کلاس های کاذب می پردازیم.

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 30 دیدگاه برای این مطلب ارسال شده است. نظردهی برای این مطلب بسته شده است .

  • ‏‏
    شکوفه(۱۷ آبان ۱۳۹۲)

    سلام دوباره.بله نوشتم ولی متاسفانه از جی کوئری اطلاع دقیقی ندارم. برای اون قسمتی که در keyfram با درصد زمانبندی میکنیم فرضا برای opacity در جی کوئری چطور باید زمانبندی کنیم؟ممنون

    • ‏‏
      کیوان علی محمدی(۲۰ آبان ۱۳۹۲)

      ایجاد انیمیشن در جی کوئری با استفاده از متد animate امکان پذیره و برای زمان بندی خاص می تونید از متد های setInterval و setTimeout استفاده کنید.

  • ‏‏
    alirezafc(۳ بهمن ۱۳۹۲)

    بسیار سپاسگذارم.

  • ‏‏
    کیان موسی خان بختیاری(۱۲ بهمن ۱۳۹۲)

    سلام
    آیا می شود به جای ساخت انیمیشن برای تغییر رنگ بک گراند یک انیمیشن برای تغییر عکس بک گراند ساخت؟
    اگر می شود چرا برای من کار نکرد با اینکه rpid css ازم اشکال نگرفت؟ 😥 😳

    • ‏‏
      کیوان علی محمدی(۱۷ بهمن ۱۳۹۲)

      بله میشه دوست عزیز،حتما کدارو اشتباه نوشتین.

  • ‏‏
    ارشیا کبیری(۱۸ اسفند ۱۳۹۲)

    سلام
    فرض کنید یک عکس رو در وسط صفحه گذاشتم و حالا میخواهم این عکس با استفاده از انیمشن دائم در حال خرچش باشد و دائما حالت چرخشی در جای خود داشته باشد . با استفاده از CSS3 چنسن امکانی هست ؟ و اگر هست لطفا کد آن را جهت راهنمایی قرار دهید . تشکر
    اگر هم با CSS3 نمی شود ، ممنون میشم بگید چطور با جی کوئری این کار رو انجام بدم .

  • ‏‏
    seyyedali farrokh(۱۱ فروردین ۱۳۹۳)

    عالی.بیست.بیست بیست بیست. 😀

  • ‏‏

    سلام.
    دو تا سوال برام پیش اومده.
    1-مثلا برای همین مثال تغییر رنگ بکگراند ، به صورت پیش فرض تکرار بینهایته و هر چند ثانیه تکزار میشه.چه جوری میشه فقط یکبار انجام بشه؟؟
    2- میخوام یک انیمیشن درست کنم که یک عکس تو صفحه باشه و بعد از کلیک کردن رو عکس؛عکس به بالا جابجا بشه و یه متن زیرش به نمایش در بیاد.میشه با انیمیشن css پیادش کرد؟؟هرکار میکنم نمیشه.میشه راهنمایی کنید

    • ‏‏
      سجاد دریس(۱۵ اردیبهشت ۱۳۹۳)

      سلام.
      1. مقدار infinite و 2s که مقدار تاخیر هست رو بردارین.
      2. با css میشه، ولی ممکنه باعث بهم ریختگی بشه، با جی کوئری راحت تر میشه

      • ‏‏

        سجاد جان من تو قسمت انیمیشن فقط گفتم از یک بکگراندی به یک بکگراند دیگه تغییر رنگ پیدا کنه و اصلا از infinity استفاده نکردم. اما باز پس از چند ثانیه این انیمیشن تکرار میشه.فکر کنم به صورت default بینهایت باشه.نمیشه بهش تعداد تکرار داد؟؟
        2- با جی کوئری؟؟؟ آشنایی زیادی باهاش ندارم.کد آماده این انیمیشن هست؟؟

  • ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram