آموزش CSS3 آموزش transition در CSS3 | پاسخ وردپرس |

مطالب پیشنهادی برای شما مهمان عزیز

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

آموزش CSS3 آموزش transition در CSS3 در وب سایت پاسخ وردپرس

خاصیت transition را در css3 بارها دیده اید و نمونه کدهای بسیاری را احتمالا مشاهده
کرده اید که این خاصیت درون استایلها دیده شده است.
transition به شما امکان میدهد که رنگ ، اندازه ، شکل و موقعیت یک المان را به سرعت کم یا زیاد و طبق تعریف خود تغییر دهید.
این عمل معمولا با هاور موس روی المان صورت میگیرد.تاکنون چندین نمونه از این مثالها را در وب موم برای شما اجرا کرده ایم
و اکنون میخواهیم توضیحی در خصوص خاصیت transition بدهیم تا با استفاده از این خاصیت آشنا شوید.

آموزش CSS3 آموزش transition در CSS3 | پاسخ وردپرس |

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

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

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

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

بیشتر بخوانید :
آموزش طراحی قالب HTML و CSS طراحی منوی اصلی + آبشاری | پاسخ وردپرس |

آموزش CSS3 آموزش transition در CSS3 | پاسخ وردپرس |

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

[checklist]

  • ease جلوه ی شروع آرام بعد سریع و در انتها آرام
  • linear جلوه ی با سرعت یکنواخت در شروع و پایان
  • ease-in جلوه ی شروع با سرعت آرام در ابتدا
  • ease-out جلوه ای با پایان آرام در انتها
  • ease-in-out جلوه ای با شروع و پایان آرام در ابتدا و انتها
  • cubic-bezier(n,n,n,n) جلوه ی خاص با ورود مقادیر دلخواه شما

[/checklist]

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

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

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

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

آموزش CSS3 آموزش transition در CSS3 | پاسخ وردپرس |

در مثال بعدی چند تغییر در سایر ویژگی های المانهای صفحه میدهیم.از جمله color , padding , opacity , border تا با خاصیت transition بهتر آشنا شوید.

ابتدا یک فایل html ایجاد کنید و کدهای زیر را در آن قرار دهید:

بیشتر بخوانید :
آموزش طراحی قالب html و css طراحی footer نمایش آخرین های نرم افزار | پاسخ وردپرس |

در فایل html خود ۵ المان قرار دادیم که هر کدام دارای یک کلاس خاص میباشد که استایل این کلاسها را در فایل style.css مینویسیم.
یک فایل به نام style.css ایجاد کنید و کدهای زیر را در آن قرار دهید:

اگر دقت کنید در هر کلاس دستور transition به تعداد ۴ بار به شکل زیر تکرار شده :

خاصیت transition به صورت پیشفرض به همین شکل نوشته میشود ولی از آنجایی که این خاصیت باید در مرورگرهای دیگر نیز قابلیت اجرایی داشته باشد نوع های اخصاصی آن برای مرورگرهای دیگر نیز در کدنویسی css شما نیز باید درج شود.
[checklist]

  • -webkit-transition برای اجرا در مرورگر کروم استفاده میشود
  • -moz-transition برای اجرا در مرورگر موزیلا استفاده میشود
  • -o-transition برای اجرا در مرورگر اپرا استفاده میشود

[/checklist]

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

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام یا پیج یوتیوب پاسخ وردپرس عضو شوید.

یک برنامه نویس آزاد که علاقه زیادی به اشتراک گذاری اطلاعات خود با دیگران داردم. همیشه به وردپرس فکر می کنم و عاشق وردپرس هستم. من یک web developer هستم و هدف من آسان کردن ورود سایر دوستان به این شغل جذاب هست. زبان برنامه نویسی محبوب من PHP هست.

لینک کپی شد!

نظر شما در این‌باره چیست؟

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *