خصوصیت 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	مشخص می کند که انتقال پس از چه مدت تاخیر آغاز شود.