سبد (0)

آموزش‌های پیشنهادی فرادرس

انتقال یا گذر در CSS3

Transition یا انتقال در CSS3

Wiki

در CSS3، در صورت تغییر ویژگی های یک عنصر، می توانیم این تغییر را بصورت تدریجی مشاهده نماییم. (بدون استفاده از Flash یا JavaScript)


پشتیبانی مرورگرها از خصوصیت Transition

Wiki

خاصیتپشتیبانی مرورگرها
transition

مرورگرهای Internet Explorer 10, Firefox, Chrome, Opera خصوصیت transition را پشتیبانی می کنند.

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

توجه: مرورگر Internet Explorer 9 و نسخه های قبلی آن، این امکان را پشتیبانی نمی کند.

توجه: مرورگر Chrome 25 و نسخه های قبلی آن، به پیشوند -webkit- نیاز دارد.


Transition چگونه کار می کند؟

Wiki

transition در CSS3، افکتی است که اجازه می دهد یک عنصر از یک Style به Styleی دیگر بتدریج تغییر نماید.

برای انجام آن، حداقل باید دو چیز را مشخص نمایید:

  • خصوصیت CSSی که می خواهید انتقال در ازای تغییر آن انجام شود.

  • مدت زمان انجام انتقال

مثال (انتقال یا گذر در CSS3)

انتقال روی خصوصیت width، با مدت زمان 2 ثانیه:

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

توجه: در صورتی که هیچ زمانی تنظیم نشود، افکتی رخ نخواهد داد چون زمان پیش فرض 0 ثانیه است.

افکت زمانی رخ می دهد که مقدار خصوصیت مشخص شده در transition تغییر کند. به عنوان نمونه این تغییر می تواند زمانی رخ دهد که موس روی عنصر، قرار می گیرد:

مثال (انتقال یا گذر در CSS3)

مشخص کردن hover: برای عنصر <div>:

div:hover
{
width:300px;
}
خودتان امتحان کنید »

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


تنظیم همزمان چند تغییر در Transition

Wiki

با جدا کردن خصوصیت ها و زمان با کاما می توانید همزمان چند تغییر را تعریف کنید:

مثال (انتقال یا گذر در CSS3)

اضافه کردن افکت روی width، height و transform:

div
{
transition: width 2s, height 2s, transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
}
خودتان امتحان کنید »

خصوصیت های انتقال در CSS3

Wiki

در جدول زیر، لیست تمام خصوصیت های انتقال آورده شده است:

خصوصیتتوضیحاتCSS
transitionتمام خصوصیت های انتقال را بصورت مختصر مشخص می کند.3
transition-propertyنام خصوصیت CSSی است که اگر بنحوی تغییر کند، انتقال یا transition صورت می گیرد.3
transition-durationمدت زمان انتقال را مشخص می کند. مقدار پیشفرض 0 است.3
transition-timing-functionدر طول یک انتقال، نحوه انجام آن را مشخص می کند. مقدار پیشفرض "ease" است.3
transition-delayبعد از چه مدت، انتقال شروع شود. مقدار پیشفرض 0 است.3

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

مثال (انتقال یا گذر در CSS3)

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

div
{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Safari */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
}
خودتان امتحان کنید »

مثال (انتقال یا گذر در CSS3)

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

div
{
transition: width 1s linear 2s;
/* Safari */
-webkit-transition:width 1s linear 2s;
}
خودتان امتحان کنید »

آموزش صوتی CSS3

بستن
مدرس:
سوال و جواب:

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

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