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

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

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

transition در CSS3

CSS

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

جلسه بیستم  : transition در CSS3

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

دوستان در این جلسه میخوام راجع به transitionدر css3 صحبت کنم . خاصیت transition عامل اصلی در افکت های css3 هست شما بدون این خاصیت نمیتونید هیچ افکتی رو اجرا کنید .

 

قاعده دستوری transition

خاصیت transition خلاصه نویسی و بهینه نویسی خاصیت های زیر هست :

transition-property : با استفاده از این خاصیت میتونید تعیین کنید که انیمیشن روی کدوم خاصیت اختصاص داده شده به عنصر اعمال بشه ، مثلا روی width عنصر اعمال بشه یا روی height عنصر یا color عنصر و … . در صورتی که مقدار این خاصیت رو برابر با all قرار بدید تمامی خاصیت ها و مقادیر و استایل یک عنصر رو تحت تاثیر انیمیشن قرار میده و انیمیشن رو روی تمامی خاصیت ها و مقادیر عنصر اجرا می کنه .

transition-duration : این خاصیت مدت زمان اجرای یک انیمیشن رو مشخص می کنه که بر حسب ثانیه و میلی ثانیه مشخص میشه.

transition-timing-function : این خاصیت شامل مقادیر زیر میشه و سرعت اجرای افکت رو تعیین می کنه :

linear : انیمیشن از ابتدا تا انتها با سرعت یکسان حرکت می کنه و انجام میشه .

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

ease-in : انیمیشن با سرعت کم شروع میشه و با سرعت زیاد به اتمام میرسه .

ease-out : انیمیشن با سرعت زیاد شروع میشه و با سرعت کم به اتمام میرسه.

ease-in-out : انیمیشن با سرعت کم شروع میشه بین انیمیشن یکم سرعت افزایش پیدا می کنه و با سرعت کم به اتمام میرسه .

cubic-bezier(n,n,n,n) : مقادیر دلخواهتون رو میتونید برای این خاصیت تعریف کنید . مقادیر امکانپذیر ۰ تا ۱ هست . میتونید برای تنظیم مقادیر از این سایت http://cubic-bezier.com استفاده کنید .

transition-delay : این خاصیت مکثی رو قبل از شروع افکت تعیین می کنه ، مثلا ۲ ثانیه میگذره و بعد افکت اجرا میشه.

 

در انتها با یک مثال این خاصیت رو بیشتر براتون توضیح میدم:

به کد زیر دقت کنید :

در این مثال یک عنصر h1 در نظر گرفتیم و به این عنصر رنگ قلم ، رنگ پس زمینه و ۱۰۰ پیکسل عرض اختصاص دادیم . همچنین تعریف کردیم که وقتی موس روی این عنصر قرار گرفت رنگ پس زمینه از مشکی به قهوه ای تغییر کنه .

این تغییر رنگ بدون وجود transition بدون هیچ افکتی انجام میشه ولی با وجود transition که براش تعریف کردیم این تغییر رنگ با افکت انجام میشه . این افکت طی یک ثانیه و بدون هیچ مکثی انجام میشه .

شماهم بطور معمول میتونید برای تمامی افکت هاتون از این transition استفاده کنید .

 

مرورگرهایی که در حال حاضر خاصیت transition رو پشتیبانی می کنند :

Explorer 10, Firefox, Opera, Chrome

 

امیدوارم این آموزش براتون مفید بوده باشه 😉

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

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

<<

>>

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



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

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

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

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

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

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

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

  • نیما طهماسبی

    ممنون از اموزش بسیار خوبتون……
    فقط میشه بگید چطور میشه برعکس همین افکت رو هم انجام بدیم؟؟؟؟
    برای مثال من یه انیمیشن ۰.۵ ثانیه ای برای یه دکمه در نظر گرفتم که وقتی موس میره روی دکمه اندازه اون تغییر میکنه….ولی وقتی موس رو از روی دکمه بر میدارم سریع برمیگرده جای اولش و من میخوام به شکل انیمیشنی برگرده جای اولش!!!!!!!

    • میترا رحیمی

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

      شما اگر از transition استفاده کرده باشید ، هر دو عمل با افکت انجام میشه . زمانی که موس رو روی عنصر میبرید و زمانی که برمیدارید هردو یکسان هستن .

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

  • امین

    آموزشتون خیلی به دردم خورد ، اتفاقا دوست داشتم افکت انیمیشن رو یاد بگیرم ولی فکر کردم فقط با JavaScript میشه بی خیال شدم !
    تشکر

  • hassany

    برای اجرای افکت در زمان برداشتن موس کافیه خاصیت transition رو در استایل اولیه عنصر مورد نظر وارد کنیم نه در استایل مربوط به هنگام hover شدن.
    تشکر از مدرسه مجازی ایرانیان

    • حسین همت یار

      سلام دوست عزیز
      بله درسته ، تو مثال هم به همین صورت پیاده شده.

  • علی پارسی

    روی یک عکس میشه همچین کاری کرد؟
    وقتی موس رفت روی عکس یکم زوم بشه یا یه لایه سایه کم رنگ بیاد روی عکس با یه نوشته روش.
    و این کار توی وردپرس انجام پذیره؟

    • میترا رحیمی

      سلام دوست عزیز
      تمامی استایل ها ، افکت ها و … که مربوط به فرانت سایت میشه یا به اصلاح سمت client سایت میشه ، با html , css , jquery انجام میشه .
      حالا گاهی اوقات وردپرس افزونه هایی رو در اختیار ما قرار میده که با نصب اون ها html و css , jquery مربوط به اون استایل و افکت به قالب شما اضافه میشه که باز برمیگرده به html و css , jquery قالب شما . مثل افزونه zoom وردپرس.
      هدف از وردپرس ، اتصال به دیتابیس و داینامیک کردن سایت هست.
      افکت مربوط به تصویر رو هم در ماهنامه آخر آموزش دادم میتونید استفاده کنید .
      موفق باشید .

  • علی پارسی

    مرسی خانوم رحیمی از توضیح کاملتون
    اگه به سایت من نگاهی کنید من با استفاده از افزونه visual compser یک سری تصاویر رو تو زیر اسلایدم اضافه کردم. متاسفانه این افزونه این قابلیت رو نداره که با هاور شدن عکس العملی نشون بده
    ولی تو تنظیمات هر عکس انتهاش افزودن css داره
    خواستم بدونم با اضافه کردن این کد ها میشه همچسن قابلیتی رو روی تصاویر اعمال کرد؟
    بازم ممنونم بابت پاسخگویی

    • میترا رحیمی

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

وبلاگ مدرسه

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

مدرسین مدرسه

  • حسین همت یار

    حسین همت یار

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

سوابق کامل

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

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