جلسه سیزدهم: خاصیت Transition در CSS و نحوه کار با آن

سلامی دوباره به شما همراهان دوست داشتنی میهن وردپرس. این بار هم در خدمت شما هستیم با آموزش خاصیت‎های پرکارد CSS البته قسمت ششم! در قسمت قبل راجع به دو خاصیت پرکاربرد که زیبایی خاصی به صفحات سایت شما می‎بخشد یعنی Text-Shadow و Box-Shadow صحبت کردیم. لطفا به آموزش جلسه قبل مراجعه کنید و خوب آن‎ها را تمرین کنید. در این جلسه می‎خواهیم راجب خاصیت Transition در CSS با هم صحبت کنیم و به طور کامل یادش بگیریم. با ما همراه باشید…

خاصیت Transition در CSS

به‎طور‎کلی و خلاصه می‎توانیم بگوییم Transition افکتی است که اجازه می‎دهد یک عنصر از استایل اول به استایل دوم به تدریج و با وقفه زمانی تغییر کند نه به صورت آنی و لحظه‎ای.

لطفا تصویر زیر را مشاهده کنید:

ویژگی Property

از Property برای تعیین ویژگی‎هایی که قرار است Transition روی آن‎ها اعمال شود استفاده می‎شود. مثلا Width ، Background ، Color و… بیشتر مواقع Property را برابر all قرار می‎دهیم. دقت داشته باشید که Property حتما باید مشخص شود.

ویژگی Duration

مدت زمان اجرای Transition یعنی مدت زمانی را که می‎خواهید المان شما از Style یک به Style دو برسد. مثلا تغییر رنگ از آبی به قرمز در 5 ثانیه.

نکته 1 : واحد آن برابر s-ms است.(ثانیه و میلی ثانیه)

نکته 2 : پیشفرض آن 0 است که فوری انجام می‎شود.

ویژگی Timing-Function

سرعت و جلوه‎ی Transition را مشخص می‎کند :

Ease : مقدار پیشفرض است. جلوه‎ی شروع آرام و در انتها آرام.

Linear : جلوه‎ با سرعت یکنواخت در شروع و پایان.

Ease-in : جلوه‎ با سرعت کم شروع و با سرعت زیاد به اتمام.

Ease-out : جلوه‎ با سرعت زیاد شروع و با سرعت کم به اتمام.

Ease-in-out : جلوه‎ با سرعت کم شروع ، بین انیمیشن کمی سرعت افزایش و با سرعت کم به اتمام.

Cubic-bezier : جلوه‎ی مقادیر دلخواه شما بین 0 و 1

ویژگی Delay

ویژگی Delay یک مکث قبل از انجام Transition مثلا 5 ثانیه قرار می‎دهد و بعد اجرا می‎شود.

نکته 1 : واحد آن برابر s-ms است.(ثانیه و میلی ثانیه)

نکته 2 : پیش‎فرض آن 0 است یعنی بدون مکث و فوری شروع می‎شود.

مختصر نویسی transition ها :

می‌‌توانیم تمامی ویژگی‌‌ها را در یک خط و به صورت مختصر بنویسیم. ما هم همین روش را پیشنهاد می‌‌کنیم. تصویر زیر نحوه استفاده از تمام ویژگی ها را به صورت یک‌‌جا نمایش می‌‌دهد :

نمایش صحیح Transition در مرورگرها :

برای اینکه ویژگی Transition در تمامی مرورگرها به صورت صحیح کار کند، نیاز داریم از یک سری قوانین پیروی کنیم. البته اکثرا نسخه‌‌های پایین مرورگرها به این قوانین نیاز دارند و مرورگرهای به‌‌روز و امروزی آنقدر پیشرفته و مدرن هستند که نیازی به این قوانین ندارند. با این حال برای محکم کاری هم که شده مجبور هستیم از این قوانین پیروی کنیم تا سایتی که طراحی کردیم کمترین میزان باگ و خرابی را داشته باشد.

مرورگر سافاری به پیشوند -webkit- نیاز دارد.

ie 9 و نسخه های قبلی این ویگی را پشتیبانی نمی‌‌کند.

کروم 25 و نسخه های قبلی آن -webkit-

فایرفاکس 4 تا 15 -moz-

خب دوستان برای این جلسه تا همین جا کافی است… تا بعد…

تیم تولید محتوا

ما در تیم تولید محتوای میهن وردپرس در تلاش هستیم تا بهترین مقالات آموزشی در زمینه وردپرس و کسب‌و‌کارهای اینترنتی را تهیه کنیم. صحت محتوای این صفحه توسط رضا راد بررسی خواهد شد.