مرجع CSS

parisaexp کاربر نقره ای

تعداد پست ها : 888

تاریخ عضویت : مهر 1392

خصوصیت text-shadow

مثال

افزودن سایه به متن:

h1
{
text-shadow: 2px 2px #ff0000;
}

در انتهای این آموزش، مثال های بیشتری را خواهید دید.

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

تمام مرورگرهای اصلی، خصوصیت text-shadow را پشتیبانی می کنند.

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

تعریف و کاربرد

با استفاده از خصوصیت text-shadow می توان به متن سایه اضافه کرد.

مقدار پیشفرض	none
ارث بری	بله
نسخه	CSS3
JavaScript ساختار	object.style.textShadow="2px 2px #ff0000"

نحوه استفاده

text-shadow: h-shadow v-shadow blur color;

توجه: با استفاده از خصوصیت text-shadow می توان یک سایه یا تعداد بیشتری سایه به متن افزود. می توان مشخصات مربوط به هر سایه را با کاما از یکدیگر جدا کرد و به عبارتی با افزودن کاما و مقادیر مربوط به سایه افقی، عمودی (و احتمالا تیرگی سایه و رنگ آن) می توان سایه ها را به متن افزود.

مقدار	توضیحات	نمایش دادن
h-shadow	الزامی است. مکان سایه افقی را مشخص می کند. مقادیر منفی نیز قابل قبول است.
v-shadow	الزامی است. مکان سایه عمودی را مشخص می کند. مقادیر منفی نیز قابل قبول است.
blur	اختیاری است. عمق تیرگی و محو شدگی را مشخص می کند.
color	برای مشاهده مقادیر ممکن برای خصوصیت color لطفا CSS Colors را ملاحظه فرمایید.

parisaexp کاربر نقره ای

تعداد پست ها : 888

تاریخ عضویت : مهر 1392

خصوصیت text-wrap

مثال

جلوگیری از شکستن خط و رفتن به خط بعد:

p.test {text-wrap:none;}

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

هیچ یک از مرورگرهای اصلی، خصوصیت text-wrap را پشتیبانی نمی کنند.

تعریف و کاربرد

با استفاده از خصوصیت text-wrap می توان قوانین مربوط به شکستن خط را در یک متن مشخص کرد.

مقدار پیشفرض	normal
ارث بری	بله
نسخه	CSS3
JavaScript ساختار	object.style.textWrap="none"

نحوه استفاده

text-wrap: normal|none|unrestricted|suppress;

مقدار	توضیحات
normal	خطوط ممکن است در نقاط مشخص شده بشکنند و به خط های بعدی بروند.
none	خطوط ممکن است نشکنند. متونی که در عنصر جا نمی شوند، سرریز می کنند.
unrestricted	خطوط ممکن است بین هر دو کاراکتر بشکنند.
suppress	شکستن خط داخل عنصر انجام می شود. مرورگر ممکن است خطوط را داخل عناصر بشکند اگر هیچ نقطه دیگری برای شکستن خط ذکر نشده باشد.

parisaexp کاربر نقره ای

تعداد پست ها : 888

تاریخ عضویت : مهر 1392

خصوصیت word-break

مثال

بریدن کلمه هنگام رسیدن به انتهای خط و رفتن به خط بعد:

p.test {word-break:break-all;}

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

تمام مرورگرهای اصلی به جز Opera، خصوصیت word-break را پشتیبانی می کنند.

تعریف و کاربرد

با استفاده از خصوصیت word-break می توان قانون شکستن خط را برای رسم الخط non-CJK تعیین کرد.

رسم الخط های CJK عبارت است نوشته های چینی، ژاپنی، کره ای.

مقدار پیشفرض	normal
ارث بری	بله
نسخه	CSS3
JavaScript ساختار	object.style.wordBreak="break-all"

نحوه استفاده

word-break: normal|break-all|keep-all;

مقدار	توضیحات
normal	شکستن خط بر اساس قانون معمول نوشته ها انجام می شود.
break-all	خطوط ممکن است بین هر دو کاراکتری بشکند.
keep-all	هرگز خط بین حروف یک کلمه شکسته نمی شود.

parisaexp کاربر نقره ای

تعداد پست ها : 888

تاریخ عضویت : مهر 1392

خصوصیت word-wrap

مثال

دراین مثال کلماتی با طول بلند که در خط جا نمی شوند، شکسته می شوند و در خط بعدی نمایش داده می شوند:

p.test {word-wrap:break-word;}

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

تمام مرورگرهای اصلی، خصوصیت word-wrap را پشتیبانی می کنند.

تعریف و کاربرد

با استفاده از خصوصیت word-wrap کلماتی با طول بلند که در خط جا نمی شوند، شکسته می شوند و در خط بعدی نمایش داده می شوند:

مقدار پیشفرض	normal
ارث بری	بله
نسخه	CSS3
JavaScript ساختار	object.style.wordWrap="break-word"

نحوه استفاده

word-wrap: normal|break-word;

مقدار	توضیحات
normal	تنها در نقاطی که مشخص شده است خط می شکند.
break-word	خط در هر جایی ممکن است شکسته شود.

parisaexp کاربر نقره ای

تعداد پست ها : 888

تاریخ عضویت : مهر 1392

خصوصیت transform

مثال

چرخاندن یک عنصر div:

div
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
}

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

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

Internet Explorer 9 از خصوصیت جایگزین ms-trsnsform- (تنها تبدیل دو بعدی) استفاده می کند.

Safari و Chrome از خصوصیت جایگزین webkit-transform- (تبدیل سه بعدی و دو بعدی) استفاده می کنند.

مرورگر Opera تنها انتقال دو بعدی را پشتیبانی می کند.

تعریف و کاربرد

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

برای درک بهتر مفهوم تبدیل به view a demo مراجعه فرمایید.

مقدار پیشفرض	none
ارث بری	خیر
نسخه	CSS3
JavaScript ساختار	object.style.transform="rotate(7deg)"

نحوه استفاده

transform: none|transform-functions;

مقدار	توضیحات	نمایش دادن
none	مشخص می کند که هیچ تبدیلی صورت نمی گیرد
matrix(n,n,n,n,n,n)	تبدیل دو بعدی را با استفاده از ماتریسی متشکل از 6 مقدار تعیین می کند.
matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	تبدیلی سه بعدی را با استفاده از ماتریسی4x4 متشکل از 16 عنصر تعریف می کند.
translate(x,y)	یک حرکت دو بعدی را تعریف می کند.
translate3d(x,y,z)	یک حرکت سه بعدی را تعریف می کند.
translateX(x)	یک حرکت در جهت محور xها را تعریف می کند.
translateY(y)	یک حرکت در جهت محور yها را تعریف می کند.
translateZ(z)	یک حرکت سه بعدی در جهت محور zها را تعریف می کند.
scale(x,y)	یک تغییر مقیاس دو بعدی را تعریف می کند.
scale3d(x,y,z)	یک تغییر مقیاس سه بعدی را تعریف می کند.
scaleX(x)	عنصر را در جهت محور xها تغییر مقیاس می دهد.
scaleY(y)	عنصر را در جهت محور yها تغییر مقیاس می دهد.
scaleZ(z)	عنصر را در جهت محور Zها تغییر مقیاس سه بعدی می دهد.
rotate(angle)	عنصر را به میزان مشخص شده در پرانتز می چرخاند.
rotate3d(x,y,z,angle)	عنصر را به صورت سه بعدی می چرخاند.
rotateX(angle)	عنصر را در جهت محور Xها تغییر مقیاس می دهد.
rotateY(angle)	عنصر را در جهت محور yها تغییر مقیاس می دهد.
rotateZ(angle)	عنصر را در جهت محور Zها تغییر مقیاس می دهد.
skew(x-angle,y-angle)	عنصر را در جهت محور X و Y کج می کند.
skewX(angle)	عنصر را در جهت محور Xها کج می کند.
skewY(angle)	عنصر را در جهت محور yها کج می کند.
perspective(n)	به عنصر یک دور نمای سه بعدی می دهد.

parisaexp کاربر نقره ای

تعداد پست ها : 888

تاریخ عضویت : مهر 1392

خصوصیت transform-origin

مثال

تنظیم مکان قرارگیری عنصر تبدیل شده:

div
{
transform: rotate(45deg);
transform-origin:20% 40%;
-ms-transform: rotate(45deg); /* IE 9 */
-ms-transform-origin:20% 40%; /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari and Chrome */
-webkit-transform-origin:20% 40%; /* Safari and Chrome */
}

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

مرورگرهای Internet Explorer 10، Firefox و Opera، خصوصیت transform-origin را پشتیبانی می کنند.

Internet Explorer 9 از خصوصیت جایگزین ms-transform-origin- (فقط تبدیل دو بعدی) استفاده می کند.

Safari و Chrome از خصوصیت جایگزین webkit-transform-origin- (تبدیل سه بعدی و دو بعدی) استفاده می کنند.

مرورگر Opera فقط انتقال دو بعدی را پشتیبانی می کند.

تعریف و کاربرد

با استفاده از خصوصیت transform-origin می توان مکان عنصر تبدیل شده را تغییر داد.

عناصر تبدیل شده دو بعدی می توانند در جهت محور xها و محور yها حرکت کنند. اما عناصر تبدیل شده سه بعدی می توانند در جهت محور zها نیز حرکت می کنند.

برای درک بهتر خصوصیت transform-origin، می توانید demo را ملاحظه فرمایید.

توجه: این خصوصیت می بایست با خصوصیت transform به کار گرفته شود.

برای درک بهتر این خصوصیت برای تبدیل سه بعدی demo را ملاخظه فرمایید.

مقدار پیشفرض	50% 50% 0
ارث بری	خیر
نسخه	CSS3
JavaScript ساختار	object.style.transformOrigin="20% 40%"

نحوه استفاده

transform-origin: x-axis y-axis z-axis;

Property مقدار	توضیحات
x-axis	مشخص می کند عنصر کجای محور xها قرار گیرد. مقادیر ممکن عبارتند از: left center right length %
y-axis	مشخص می کند که عنصر کجای محور yها قرار گیرد. مقادیر ممکن عبارتند از: top center bottom length %
z-axis	مشخص می کند که عنصر کجای محور zها قرار گیرد. length

Property مقدار

توضیحات

x-axis

مشخص می کند عنصر کجای محور xها قرار گیرد. مقادیر ممکن عبارتند از:

left
center
right
length
%

y-axis

مشخص می کند که عنصر کجای محور yها قرار گیرد. مقادیر ممکن عبارتند از:

top
center
bottom
length
%

z-axis

مشخص می کند که عنصر کجای محور zها قرار گیرد.

length

parisaexp کاربر نقره ای

تعداد پست ها : 888

تاریخ عضویت : مهر 1392

خصوصیت transform-style

مثال

در این مثال، عناصر فرزند تبدیل سه بعدی خودشان را حفظ می کنند:

div
{
transform: rotateY(60deg);
transform-style: preserve-3d;
-webkit-transform: rotateY(60deg); /* Safari and Chrome */
-webkit-transform-style: preserve-3d; /* Safari and Chrome */
}

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

مرورگر Firefox خصوصیت transform-style را پشتیبانی می کند.

مرورگرهای Chrome و Safari از خصوصیت جایگزین webkit-transform-style- استفاده می کنند.

تعریف و کاربرد

با استفاده از خصوصیت transform-style می توان نحوه چرخیدن عناصر تو در تو را در فضای سه بعدی مشخص کرد.

توجه: این خصوصیت می بایست با خصوصیت transform به کار گرفته شود.

کاربران Chrome و Safari: برای درک بهتر خصوصیت transform-style به view a demo مراجعه فرمایید.

مقدار پیشفرض	flat
ارث بری	خیر
نسخه	CSS3
JavaScript ساختار	object.style.transformStyle="preserve-3d"

نحوه استفاده

transform-style: flat|preserve-3d;

Property مقدار	توضیحات
flat	عناصر فرزند موقعیت سه بعدی خود را حفظ نمی کنند.
preserve-3d	عناصر فرزند موقعیت سه بعدی خود را نگه می دارند.

parisaexp کاربر نقره ای

تعداد پست ها : 888

تاریخ عضویت : مهر 1392

خصوصیت perspective

مثال

ایجاد دور نما برای یک عنصر:

div
{
perspective: 500px;
-webkit-perspective: 500px; /* Safari and Chrome */
}

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

مرورگرهای Firefox و IE 10 خصوصیت perspective را پشتیبانی می کنند.

مرورگرهای Safari و Chrome خصوصیت جایگزین webkit-perspective- را پشتیبانی می کنند.

تعریف و کاربرد

با استفاده از خصوصیت perspective می توان مشخص کرد که یک عنصر سه بعدی در چند پیکسلی دید کاربر قرار گیرد. این خصوصیت به شما اجازه می دهد تا دور نمای عناصر سه بعدی را تغییر دهید تا نمای آنها تغییر یابند.

هنگامی که برای یک عنصر خصوصیت perspective تنظیم مس شود. در حقیقت، فرزندان این عنصر دورنما پیدا می کنند نه خود عنصر!

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

نکته: خصوصیت perspective را به همراه خصوصیت perspective-origin به کار ببندید. این کار به شما اجازه می دهد، مکان پایینی عنصر سه بعدی را تغییر دهید.

کاربران chrome و Safari برای درک بهتر خصوصیت perspective این دمو demo را ملاحظه فرمایید.

مقدار پیشفرض	none
ارث بری	خیر
نسخه	CSS3
JavaScript ساختار	object.style.perspective=500px

نحوه استفاده

perspective: number|none;

Property مقدار	توضیحات
number	عنصر در چند پیکسلی دید کاربر قرار گیرد.
none	دورنمایی برای عنصر تنظیم نشده است. مشابه مقدار صفر است. این مقدار پیش فرض است.

parisaexp کاربر نقره ای

تعداد پست ها : 888

تاریخ عضویت : مهر 1392

خصوصیت perspective-origin

مثال

تنظیم محل قرار گیری عنصر سه بعدی از پایین.

div
{
perspective:150px;
perspective-origin: 10% 10%;
-webkit-perspective:150px; /* Safari and Chrome */
-webkit-perspective-origin: 10% 10%; /* Safari and Chrome */
}

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

مرورگرهای Firefox و IE 10 خصوصیت perspective-origin را پشتیبانی می کنند.

مرورگرهای Safari و Chrome خصوصیت جایگزین webkit-perspective-origin- را پشتیبانی می کنند.

تعریف و کاربرد

با استفاده از خصوصیت perspective-origin می توان مشخص کرد که یک عنصر سه بعدی روی محور X و محور y از کجا شروع شود. این خصوصیت به شما اجازه می دهد، محل قرارگیری عنصر سه بعدی از پایین را مشخص کنید.

نکته: خصوصیت perspective-origin را به همراه خصوصیت perspective به کار ببندید. این کار به شما اجازه می دهد، مکان پایینی عنصر سه بعدی را تغییر دهید.

کاربران chrome و Safari برای درک بهتر خصوصیت perspective این دمو demo را ملاحظه فرمایید.

مقدار پیشفرض	50% 50%
ارث بری	خیر
نسخه	CSS3
JavaScript ساختار	object.style.perspectiveOrigin="10% 10%"

نحوه استفاده

perspective-origin: x-axis y-axis;

مقدارخصوصیت	توضیحات
x-axis	تعریف اینکه دورنما کجای محور x ها قرار گیرد. مقادیر ممکن: left center right length % مقدار پیشفرض 50%
y-axis	تعریف اینکه دورنما کجای محور y ها قرار گیرد. مقادیر ممکن: top center bottom length % مقدار پیشفرض 50%

مقدارخصوصیت

توضیحات

x-axis

تعریف اینکه دورنما کجای محور x ها قرار گیرد.

مقادیر ممکن:

left
center
right
length
%

مقدار پیشفرض 50%

y-axis

تعریف اینکه دورنما کجای محور y ها قرار گیرد.

مقادیر ممکن:

top
center
bottom
length
%

مقدار پیشفرض 50%

parisaexp کاربر نقره ای

تعداد پست ها : 888

تاریخ عضویت : مهر 1392

خصوصیت backface-visibility

مثال

پنهان کردن پشت عنصر <div> هنگام چرخش:

div
{
backface-visibility:hidden;
-webkit-backface-visibility:hidden; /* Chrome and Safari */
-moz-backface-visibility:hidden; /* Firefox */
-ms-backface-visibility:hidden; /* Internet Explorer */
}

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

هیچ کدام از مرورگرهای اصلی خصوصیت backface-visibility را پشتیبانی نمی کنند.

مرورگر Internet Explorer 10 به پیشوند -ms- نیاز دارد.

مرورگر Firefox به پیشوند -moz- نیاز دارند.

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

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

تعریف و کاربرد

با استفاده از خصوصیت backface-visibility، می توان مشخص نمود، زمانی که پشت عنصر به سمت صفحه نمایش است، آیا دیده شود یا خیر.

این خصوصیت زمانی که عنصر را می چرخانید و نمی خواهد پشت آن دیده شود مفید است.

مقدار پیشفرض	visible
ارث بری	خیر
نسخه	CSS3
JavaScript ساختار	object.style.backfaceVisibility="hidden"

نحوه استفاده

backface-visibility: visible|hidden;

مقدار	توضیحات	نمایش دادن
visible	پشت عنصر قابل دیدن نباشد.
hidden	پشت عنصر قابل دیدن باشد.

parisaexp کاربر نقره ای

تعداد پست ها : 888

تاریخ عضویت : مهر 1392

خصوصیت transition

مثال

روی عنصر div حرکت کنید تا عرض عنصر به تدریج از 100 پیکسل به 300 پیکسل برسد:

div
{
width:100px;
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
}
div:hover {width:300px;}

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

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

Safari از خصوصیت جایگزین webkit-transform-استفاده می کنند.

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

تعریف و کاربرد

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

transition-property, transition-duration, transition-timing-function و transition-delay.

توجه: همواره transition-duration را مشخص فرمایید، در غیر این صورت duration صفر است، و خصوصیت transition کار نمی کند.

مقدار پیشفرض	all 0 ease 0
ارث بری	خیر
نسخه	CSS3
JavaScript ساختار	object.style.transition="width 2s"

نحوه استفاده

transition: property duration timing-function delay;

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

parisaexp کاربر نقره ای

تعداد پست ها : 888

تاریخ عضویت : مهر 1392

خصوصیت transition-property

مثال

روی عنصر div حرکت کنید و یک انتقال روان را با تغییر عرض مشاهده فرمایید:

div
{
transition-property:width;
-moz-transition-property: width; /* Firefox 4 */
-webkit-transition-property:width; /* Safari and Chrome */
-o-transition-property:width; /* Opera */
}

div:hover {width:300px;}

در انتهای این آمورش، مثال های بیشتری را خواهید دید.

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

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

Safari از خصوصیت جایگزین webkit-transition-property- استفاده می کنند.

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

تعریف و کاربرد

با استفاده از خصوصیت transition-property می توان نام خصوصیت CSSی که انتقال روی آن خصوصیت صورت می گیرد را مشخص کرد. به عبارتی transition-property نام خصوصیت CSSی است که اگر بنحوی تغییر کند، انتقال یا transition صورت می گیرد.

نکته: انتقال معمولا هنگامی که موس را روی عنصری حرکت دهیم رخ می دهد.

توجه: همواره transition-duration را مشخص فرمایید، در غیر این صورت duration صفر است، و خصوصیت transition کار نمی کند.

مقدار پیشفرض	all
ارث بری	خیر
نسخه	CSS3
JavaScript ساختار	object.style.transitionProperty="width,height"

نحوه استفاده

transition-property: none|all|property;

مقدار	توضیحات
none	انتقال روی هیچ خصوصیتی تاثیر نمی گذارد.
all	تمام خصوصیت ها از انتقال تاثیر می پذیرند.
property	لیستی از خصوصیت ها که با کاما از همدیگر جدا شده اند را مشخص می کند که انتقال روی آنها تاثیر دارد.

parisaexp کاربر نقره ای

تعداد پست ها : 888

تاریخ عضویت : مهر 1392

خصوصیت transition-duration

مثال

در این مثال انتقال به مدت 5 ثانیه طول می کشد:

-webkit-transition-duration: 5s; /* Safari */

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

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

Safari از خصوصیت جایگزین webkit-transition-duration-استفاده می کنند.

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

تعریف و کاربرد

با استفاده از خصوصیت transiiion-duration می توان مشخص کرد عمل انتقال در چند ثانیه یا در چند میلی ثانیه تکمیل شود.

مقدار پیشفرض	0
ارث بری	خیر
نسخه	CSS3
JavaScript ساختار	object.style.transitionDuration="5s"

نحوه استفاده

transition-duration: time;

مقدار	توضیحات
time	مشخص می کند عمل انتقال در چند ثانیه یا در چند میلی ثانیه تکمیل شود. مقدار صفر به معنی عدم وجود انتقال است.

parisaexp کاربر نقره ای

تعداد پست ها : 888

تاریخ عضویت : مهر 1392

خصوصیت transition-timing-function

مثال

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

transition-timing-function: linear;
-webkit-transition-timing-function: linear; /* Safari and Chrome */

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

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

Safari از خصوصیت جایگزین webkit-transition-timing-function استفاده می کنند.

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

تعریف و کاربرد

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

این ویژگی، در واقع اجازه می دهد، اثر انتقال با سرعت های مختلفی در مدت زمان انتقال انجام گیرد.

مقدار پیشفرض	ease
ارث بری	خیر
نسخه	CSS3
JavaScript ساختار	object.style.transitionTimingFunction="linear"

نحوه استفاده

مقدار	توضیحات
linear	انتقالی با سرعت مشابه از شروع تا خاتمه را مشخص می کند.
ease	انتقالی را مشخص می کند که ابتدا با سرعت کند آغاز می شود، سپس سریعتر می شود، در نهایت با سرعتی کند، خاتمه می یابد.
ease-in	انتقالی را مشخص می کند که با سرعت کند شروع می شود.
ease-out	انتقالی را مشخص می کند که با سرعت کندی خاتمه می یابد.
ease-in-out	انتقالی را مشخص می کند که دارای شروع و خاتمه کند می باشد.
cubic-bezier(n,n,n,n)	در این تابع شما می توانید مقادیر دلخوه خود را جایگذاری کند. مقادیر ممکن به جای n مقادیربین صفر و یک هستند.

نکته: مقادیر ممکن در مثال های زیر را امتحان کنید تا درک بهتری از نحوه کار داشته باشید.

مثال - خودتان امتحان کنید

مثال

برای درک بهتر مقادیر ممکن برای تابع: در این مثال 5 عنصر div مختلف با 5 مقدار متفاوت آورده شده است:

#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;}
/* Safari */
#div1 {-webkit-transition-timing-function: linear;}
#div2 {-webkit-transition-timing-function: ease;}
#div3 {-webkit-transition-timing-function: ease-in;}
#div4 {-webkit-transition-timing-function: ease-out;}
#div5 {-webkit-transition-timing-function: ease-in-out;}

مثال

مشابه مثال بالا، با این تفاوت که از تابع cubic-bezier استفاده شده است:

#div1 {transition-timing-function: cubic-bezier(0,0,1,1;}
#div2 {transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {transition-timing-function: cubic-bezier(0.42,0,0.58,1);}
/* Safari */
#div1 {-webkit-transition-timing-function: cubic-bezier(0,0,1,1;}
#div2 {-webkit-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-webkit-transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-webkit-transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-webkit-transition-timing-function: cubic-bezier(0.42,0,0.58,1);}

parisaexp کاربر نقره ای

تعداد پست ها : 888

تاریخ عضویت : مهر 1392

خصوصیت transition-delay

مثال

پس از دو ثانیه انتقال شروع می شود:

transition-delay: 2s;
-webkit-transition-delay: 2s; /* Safari */

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

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

Safari از خصوصیت جایگزین webkit-transition-delay- استفاده می کنند.

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

تعریف و کاربرد

با استفاده از خصوصیت transition-delay می توان مشخص کرد که پس از چه مدت زمانی انتقال انجام شود.

مقادیر transition-delay به ثانیه (s) یا میلی ثانیه (ms) مشخص می گردد.

مقدار پیشفرض	0
ارث بری	خیر
نسخه	CSS3
JavaScript ساختار	object.style.transitionDelay="2s"

نحوه استفاده

transition-delay: time;

مقدار	توضیحات
time	عددی که به ثانیه یا میلی ثانیه مدت زمان تاخیر انتقال را نشان می دهد.