ویژگی transition Style

تعریف و استفاده

transition این ویژگی یک شورت‌کر از چهار ویژگی انتقال است:

نکات:لطفاً همیشه ویژگی transitionDuration، در غیر این صورت مدت زمان 0 خواهد بود و انتقال معتبر نخواهد بود.

لطفاً به

دستورالعمل CSS:ویژگی transition

مثال

برای تغییر تدریجی ویژگی‌های div با قرار دادن ماوس روی آن استفاده کنید:

document.getElementById("myDIV").style.transition = "all 2s";

آزمایش شخصی

نحوه نوشتن

بازگشتی از ویژگی transition:

object.style.transition

تنظیم ویژگی transition:

object.style.transition = "property duration timing-function delay|initial|inherit"

مقدار ویژگی

مقادیر توضیح
transitionProperty تعیین نام ویژگی CSS که اثر انتقال به آن اعمال می‌شود.
transitionDuration تعیین مدت زمانی که اثر انتقال نیاز دارد تا تکمیل شود.
transitionTimingFunction تعیین منحنی سرعت اثر انتقال
transitionDelay تعریف زمان شروع اثر انتقال
initial این ویژگی را به مقدار پیش‌فرض خود تنظیم کنید. لطفاً به initial.
inherit این ویژگی را از عنصر والد خود ارث می‌برد. لطفاً به inherit.

جزئیات فنی

مقدار پیش‌فرض: all 0 ease 0
مقدار بازگشتی: رشته، که نمایانگر ویژگی transition.
نسخه CSS: CSS3

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

اعداد در جدول نشان‌دهنده نسخه اولیه مرورگرهایی است که این ویژگی را کامل پشتیبانی می‌کنند.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
26.0 10.0 16.0 6.1 12.1