آموزش Transition در CSS3

Transition در CSS3

در CSS3، با استفاده از خاصیت transition می‌توانید تغییرات در عناصر را به‌صورت تدریجی و در طول زمان معین انجام دهید. این خاصیت به طراح وب امکان می‌دهد تا با اعمال افکت‌های نرم و روان، تجربه کاربری بهتری ایجاد کند.

چگونه می توان از Transition در CSS3 استفاده کرد ؟

به منظور ایجاد جلوه یا افکت transition, ابتدا باید دو چیز را مشخص کنید :

• خاصیت (property) که می خواهید جلوه یا افکت دلخواه را به آن اضافه کنید.
• مدت زمانی که افکت طول می کشد (انتقال از یک حالت به حالت دیگر صورت می گیرد).

مثال زیر یک المان قرمز رنگ div 100px * 100px نشان می دهد . المان div همچنین یک افکت transition برای خاصیت width مشخص کرده است که به مدت 2 ثانیه طول می کشد .

                
        div {
        width: 100px;
        height: 100px;
        background: red;
        -webkit-transition: width 2s; /* Safari */
        transition: width 2s;
        }
    

افکت transitionزمانی آغاز می گردد که خاصیت مشخص شده ی CSS (منظور عرض / width است) تغییر مقدار دهد .
حال یک مقدار جدید برای خاصیت width تعریف می کنیم .

     
        div:hover {
        width: 300px;
        }
    

تنظیم همزمان چندین تغییر در Transition (چندین مقدار property را به طور همزمان تغییر دهید)

مثال زیر یک افکت transition برای هر دو خاصیت width و height اضافه می کند که به مدت 2 ثانیه طول می کشد .

        div {
        -webkit-transition: width 2s, height 4s; /* Safari */
        transition: width 2s, height 4s;
        }
    

نمودار سرعت (speed curve) را برای transition ( افکت تغییر حالت) مشخص کنید

خاصیت transition-timing-function نمودار سرعت transition (افکت تغییر حالت) را مشخص می کند (سرعت انجام تغییر حالت عنصر را در محدوه ی زمانی تعیین شده برای آن تعریف می کند) .
خاصیت نام برده می تواند مقادیر زیر را داشته باشد :

• ease : افکت تغییر حالت با سرعت آرام آغاز می گردد, سپس تند می شود و در نهایت مجدداً کند شده و به پایان می رسد (حالت پیش فرض) .
• Linear : افکت را با سرعتی یکنواخت آغاز کرده و به پایان می رساند .
• Ease-in : افکت transition را با سرعتی کند و آرام آغاز می کند .
• ease-out : افکت transition را با سرعتی کند به اتمام می رساند .
• ease-in-out : افکت transition را با سرعتی کند آغاز کرده و خاتمه می دهد .
• cubic-bezier(n,n,n,n) : به شما امکان می دهد مقادیر خود را در تابع cubic-bezier تعریف کنید .

مثال زیر نمودارهای سرعت مختلفی را برای استفاده نمایش می دهد :

        #div1 {transition-timing-function: linear;}
        #div2 {transition-timing-function: ease;}
        #div3 {transition-timing-function: ease-in;}
        #div4 {transition-timing-function: ease-out;}
        #div5 {transition-timing-function: ease-in-out;}
    

به تأخیر انداختن افکت تغییر حالت (transition) با خاصیت transition-delay

transition-delay مشخص می کند اجرای افکت انیمیشن بعد از چند ثانیه تاخیر شروع شود یا خیر, به عبارت دیگر تاخیری بر حسب ثانیه برای افکت transition تعریف می کند .
در مثال زیر مشاهده می کنید که افکت با یک ثانیه تاخیر آغاز می گردد :

                  
        div { 
            -webkit-transition-delay: 1s; /* Safari */ 
            transition-delay: 1s; 
        }
    

ترکیب Transition و Transform

مثال زیر یک transformation (افکت تغییر وضعیت نمایش) به افکت transition اضافه می کند :

   
        div {
        -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* Safari */
        transition: width 2s, height 2s, transform 2s;
        }
    

استفاده از خاصیت‌های Transition به‌صورت جداگانه

می توان یک خاصیت های transition را به صورت تکی مقداردهی و مشخص کرد, به ترتیب زیر :

       
        div {
        transition-property: width;
        transition-duration: 2s;
        transition-timing-function: linear;
        transition-delay: 1s;
        }
    

یا همه ی آن ها را در یک تعریف (با استفاده از خاصیت مختصرنویسی transition) مقداردهی کرد, بدین ترتیب :

      
        div {
        transition: width 2s linear 1s;
        }
    

جمع بندی

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