انتقال های CSS3  به شما اجازه میدهد مقادیر یک خصوصیت را بتدریج ( از یک مقدار به مقداری دیگر) در یک بازه زمانی تغییر دهید.
  • 1395/3/18 6/7/2016 4:40:12 PM 6/7/2016 4:40:12 PM
  • 0
  • 426

انتقال های CSS3  به شما اجازه میدهد مقادیر یک خصوصیت را بتدریج ( از یک مقدار به مقداری دیگر) در یک بازه زمانی تغییر دهید.


پشتیانی مرورگر از انتقال ها

در جدول زیر اعداد نشان دهنده ی اولین نسخه ی مرورگری است که به طور کامل از خصوصیت پشتیبانی می کند. اعدادی که به همراه  -webkit-, -moz-, -o- آمده اند اولین نسخه ای از مرورگر را نشان می دهد که خصوصیت در صورت استفاده شدن با یک پیشوند توسط مرورگر پشتیبانی شده است.

خصوصیت

IE

Chrome

Firefox

Safari

Opera

transition

10.0

26.0
4.0 –

webkit-

16.0
4.0 –

moz-

6.1
3.1 –

webkit-

12.1
10.5 –

o-

transition-delay

10.0

26.0
4.0 –

webkit-

16.0
4.0 –

moz-

6.1
3.1 –

webkit-

12.1

10.5 –

o-

transition-duration

10.0

26.0
4.0 –

webkit-

16.0
4.0 –

moz-

6.1
3.1 –

webkit-

12.1

10.5 –

o-

transition-property

10.0

26.0
4.0 –

webkit-

16.0
4.0 –

moz-

6.1
3.1 –

webkit-

12.1

10.5-

o-

transition-timing-function

10.0

26.0
4.0 –

webkit-

16.0
4.0 –

moz-

6.1
3.1 –

webkit-

12.1

10.5-

o-

 


از انتقال ها چگونه استفاده می شود؟

برای ایجاد یک انتقال، شما باید دو چیز را تعیین کنید:

  • خصوصیت CSS که شما می خواهید افکت اضافه کنید
  • مدت زمان افکت

یادداشت : در صورتی که مدت زمان تعیین نشود، انتقال اثری نخواهد داشت، چرا که مقدار پیش فرض صفر است.

مثال زیر یک عنصر <div>  با رنگ قرمز با اندازه 100px * 100px  را نشان می دهد. عنصر <div>  افکت انتقالی دارد که برای خصوصیت عرض آن تعیین شده است، با مدت زمان 2 ثانیه:

مثال

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

افکت انتقال زمانی شروع می شود که خصوصیت CSS  تعیین شده ( عرض ) مقدارش تغییر می کند. حالا ، بیایید زمانی که ماوس کاربر روی عنصر <div>  حرکت می کند یک مقدار جدید برای خصوصیت عرض تعیین کنیم:

مثال

div:hover {
    width: 300px;
}

توجه کنید که وقتی که نشان گر ماوس بیرون از عنصر می رود، آن به تدریج به حالت اصلی خود بازگشت می کند.


تغییر مقادیر چند خصوصیت

مثال زیر یک افکت انتقال را به دو خصوصیت ارتفاع و عرض اضافه می کند، با مدت زمان 2 ثانیه برای عرض و 4 ثانیه برای ارتفاع:
مثال

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

تعیین سرعت منحنی انتقال:

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

  • ساده -  یک افکت انتقال با یک شروع آهسته، سپس سریع، سپس با پایان آهسته  را مشخص می کند ( این پیش فرض است)

  • خطی – یک افکت انتقال با سرعت ثابت از شروع تا پایان را مشخص می کند

  • ساده –داخل – یک افکت  انتقال با شروع آهسته را مشخص می کند

  • ساده – خارج – یک افکت انتقال با پایان آهسته را مشخص می کند

  • ساده-داخل-خارج- یک افکت انتقال با شروع و پایان آهسته را مشخص می کند

  • مکعب-بزیر (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-delay یک تاخیر ( بر حسب ثانیه) برای افکت انتقال مشخص می کند. مثال زیر قبل از شروع یک ثانیه تاخیر دارد
مثال

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

انتقال + تبدیل

مثال زیر یک تبدیل به افکت انتقال اضافه می کند
مثال

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

مثال های بیشتر از انتقال

خصوصیات انتقال CSS3 می تواند تک به تک مشخص شود، مانند مثال زیر:
مثال

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

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

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

خصوصیات انتقال CSS3

در جدول زیر لیست خصوصیات انتقال سه بعدی را مشاهده می کنید.

شرح

خصوصیت

یک خصوصیت مختصرنویسی برای تعیین چهار خصوصیت انتقال در یک خصوصیت

transition

تعیین یک تاخیر ( برحسب ثانیه ) برای افکت انتقال

transition-delay

تعیین می کند چند ثانیه یا میلی ثانیه یک افکت انتقال می گیرد تا کامل شود

transition-duration

نام خصوصیت CSS  را تعیین می کند که افکت انتقال بر آن اعمال می شود

transition-property

سرعت منحنی افکت انتقال را تعیین می کند

transition-timing-function

 

محمد انصاری

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

نظرات 0
برای ارسال دیدگاه وارد حساب کاربری خود شوید.

ورود به حساب کاربری ایجاد حساب کاربری
محمد انصاری
انتقال های CSS3
زیگماوب