در این مطلب قصد داریم تا یکی دیگر از خاصیت های موجود در زبان برنامه نویسی CSS3 را برای شما بررسی کنیم .دانستن و به کار بردن این خواص می تواند برای شما امکانات جالبی را فراهم آورد.در این آموزش می پردازیم به :
خاصیت transition-duration :
خاصیت transition-duration ، مدت زمان اجرای فرایند انیمیشن را برای عنصر مشخص می کند .
برای مثال اگر قرار است عرض عنصر از مقدار ۱۰۰ px به ۳۰۰ px افزایش یابد ، این عمل در مدت ۴ ثانیه انجام می شود .
شکل کلی استفاده از این خاصیت به صورت زیر است :
;Syntax: transition-duration : time
توضیح موارد syntax :
time:
مدت زمان اجرای انیمیشن را بر حسب میلی ثانیه ( ms ) یا ثانیه ( s ) تعیین می کند .
استفاده از این پارامتر اجباری است .
مقدار پیش فرض این پارامتر صفر است و به این معناست که انیمیشن انجام نمی شود . بنابراین حتما باید آن را مقدار دهی کنید .
پشتیانی در مرورگر های مختلف :
متاسفانه این خاصیت در مرورگر IE پشتیانی نمی شود ( مگر در نسخه ۱۰ در آینده ) و توسط هیچ کدام از مرورگر های مطرح دیگر به صورت عادی پشتیانی نمی شود . برای پشتیبانی در مرورگرهای مختلف باید برای هر کدام ، کد لازم آنها که در جدول زیر آمده را استفاده نمود :
کد لازم برای پشتیانی نوع مرورگر:
مرورگر فایرفاکس
با اعمال یک تغییر در کد خاصیت از آن پشتیانی می کند . برای پشتیانی این مرورگر باید خاصیت را به صورت moz-transition-duration- بنویسید .
مرورگر اپرا
با اعمال یک تغییر در کد خاصیت از آن پشتیانی می کند . برای پشتیانی این مرورگر باید خاصیت را به صورت o-transition-duration- بنویسید .
مرورگر اینترنت اکسپلورر
این خاصیت پشتیانی نمی شود .
مرورگر کروم
با اعمال یک تغییر در کد خاصیت از آن پشتیانی می کند . برای پشتیانی این مرورگر باید خاصیت را به صورت webkit-transition-duration- بنویسید .
