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

transition در CSS3

خاصیت 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

 

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

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

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

حسین همت یار

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

دیدگاه ۹

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

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

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

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

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

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

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

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

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

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

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

پنل کاربران

بستن
*
*

نظرسنجی

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

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

اموزش تصادفی

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

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

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

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