دوره جامع مدیریت سایت

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

خاصیت Transition در CSS
خاصیت Transition در CSS

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

خاصیت Transition در CSS

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

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

کد ترنزیشن در css

ویژگی 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-

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

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

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

  1. کاربر مهمان ۰۹ اردیبهشت ۱۳۹۸

    سلام وقتتون بخیر
    من سایتمو امروز راه اندازی کردم ولی خامه میخوام بدونم با این آموزش ها میتونم سایتی که برای نمایش محصول و قیمت گذاری و درگاه اینترنتی داره داشته باشم؟

    • U18045 ۱۰ اردیبهشت ۱۳۹۸

      درود به شما. بله.اما پیشنهاد ما به شما استفاده از قالب های آماده موجود در سایت هست. شما میتونید پیش نمایش این قالب ها را مشاهده کنید و درصورت نیاز css این قالب ها را بصورت childtheme تغییر دهید.

  2. کاربر مهمان ۲۱ اسفند ۱۳۹۷

    سلام. آموزشتون تموم شد؟

    • رضا حسینی راد رضا حسینی راد ۲۱ اسفند ۱۳۹۷

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

  3. کاربر مهمان ۲۷ دی ۱۳۹۷

    سلام خدمت شما
    من این مراحل را انجام دادم ولی چگونه سایت خود را در گوگل ثبت کنم؟؟؟