خصوصیت animation-timing-function CSS

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

animation-timing-function منحنی‌های سرعت آهنگ را تعیین می‌کنند.

منحنی‌های سرعت تعریف می‌کنند که چقدر زمان طول می‌کشد تا یک آهنگ CSS از یک حالت به حالت دیگر تغییر کند.

منحنی‌های سرعت برای جلوگیری از ناگهانی تغییرات استفاده می‌شوند.

لطفاً به اینجا نیز مراجعه کنید:

آموزش CSS3:آنیمیشن CSS

دستورالعمل HTML DOM:ویژگی animationTimingFunction

مثال

مثال 1

آهنگی از شروع تا پایان با سرعت یکسان پخش می‌شود:

div
{
animation-timing-function:2s;
}

آموزش عملی

مثال 2

برای بهتر درک کردن مقادیر مختلف کارکرد زمانی، پنج div عناصر با پنج مقادیر مختلف ارائه شده است:

#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

آموزش عملی

مثال 3

مانند مثال بالا، اما منحنی سرعت را از طریق تابع cubic-bezier تعریف می‌کند:

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

آموزش عملی

نوع‌زداری CSS

animation-timing-function: مقدار;

animation-timing-function از تابع ریاضی به نام cubic-bezier استفاده می‌کند تا منحنی سرعت ایجاد کند. شما می‌توانید مقادیر خود را در این تابع وارد کنید، همچنین مقادیر پیش‌فرض:

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

توضیح:لطفاً در بخش زیر به عنوان «آموزش عملی» از مقادیر مختلف استفاده کنید.

جزئیات فنی

مقدار پیش‌فرض: راحت
نمایندگی: خیر
نسخه: CSS3
نوع‌زداری جاوااسکریپت: اشیاء.style.animationTimingFunction="linear"

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

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

با -webkit-،-moz- یا -o- شماره‌های اولین نسخه استفاده شده به عنوان پیشوند نشان داده می‌شوند.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
43.0
4.0 -webkit-		 10.0 16.0
5.0 -moz-		 9.0
4.0 -webkit-		 30.0
15.0 -webkit-
12.0 -o-