سی ایس ایس آنیمیشن تائمنگ فونکشن خصوصیات

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

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(ن,ن,ن,ن) در تابع cubic-bezier مقادیر خود را وارد کنید. مقادیر ممکن از 0 تا 1 هستند.

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

جزئیات فنی

مقدار پیش‌فرض: آسان
ارث‌پذیری: خیر
نسخه: CSS3
جمله‌بندی جاوااسکریپت: اشیاء.style.animationTimingFunction="linear"

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

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

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

کروم ایج فایرفاکس سافاری آپرا
کروم ایج فایرفاکس سافاری آپرا
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-