در این مطلب قصد داریم تا یکی دیگر از خاصیت های موجود در زبان برنامه نویسی CSS3 را برای شما بررسی کنیم .دانستن و به کار بردن این خواص می تواند برای شما امکانات جالبی را فراهم آورد.در این آموزش می پردازیم به :
خاصیت transition-timing-function :
خاصیت transition-timing-function ، نحوه و سرعت اجرای انیمیشن را تعیین می کند .
بوسیله این خاصیت می توانید سرعت اجرای انیمیشن را در ابتدا وسط و انتهای آن بنا بر سلیقه خود کم و یا زیاد کنید .
شکل کلی استفاده از این خاصیت به صورت زیر است :
;Syntax: transition-timing-function : linear | ease | ease-in | ease-out | ease-in-out
این خاصیت می تواند یکی از مقادیر زیر را داشته باشد ، که هر کدام یک افکت خاص را به اجرای خاصیت می دهند :
transition-timing-function انواع موارد ممکن برای خاصیت:
liner:
در این حالت سرعت اجرای انیمیشن از ابتدا تا انتهای آن یکسان است .
در این حالت افکت ابتدا آهسته ، در میانه سریع و در انتها مجددا آهسته می شود .
ease:
مقدار ease ، مقدار پیش فرض خاصیت است .
ease-in:
در این حالت افکت با سرعت آهسته شروع شده و سپس سریع می شود .
ease-out:
در این حالت افکت با سرعت زیاد شروع شده و سپس آهسته می شود .
ease-in-out:
در این حالت افکت با سرعت آهسته شروع شده و سپس آهسته نیز پایان می یابد .
پشتیانی در مرورگر های مختلف :
متاسفانه این خاصیت در مرورگر IE پشتیانی نمی شود ( مگر در نسخه ۱۰ در آینده ) و توسط هیچ کدام از مرورگر های مطرح دیگر به صورت عادی پشتیانی نمی شود . برای پشتیبانی در مرورگرهای مختلف باید برای هر کدام ، کد لازم آنها که در جدول زیر آمده را استفاده نمود :
کد لازم برای پشتیانی نوع مرورگر:
مرورگر فایرفاکس:
با اعمال یک تغییر در کد خاصیت از آن پشتیانی می کند . برای پشتیانی این مرورگر باید خاصیت را به صورت moz-transition-delay- بنویسید .
مرورگر اپرا:
با اعمال یک تغییر در کد خاصیت از آن پشتیانی می کند . برای پشتیانی این مرورگر باید خاصیت را به صورت o-transition-delay- بنویسید .
مرورگر اینترنت اکسپلورر:
این خاصیت پشتیانی نمی شود .
مرورگر کروم:
با اعمال یک تغییر در کد خاصیت از آن پشتیانی می کند . برای پشتیانی این مر
