ویژگی Style animationTimingFunction

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

animationTimingFunction منحنی سرعت آنی‌میشن را مشخص کنید.

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

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

مثال

تغییر ویژگی animationTimingFunction عناصر <div>:

document.getElementById("myDIV").style.animationTimingFunction = "linear";

تست کنید

نحوه نوشتن

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

object.style.animationTimingFunction

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

object.style.animationTimingFunction = "linear|ease|ease-in|ease-out|cubic-bezier(n, n, n, n)|initial|inherit"

مقدار ویژگی

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

مقدارهای خود را در تابع کوبیک بی‌زیز تعریف کنید.

مقدارهای ممکن از 0 تا 1 هستند.
initial این ویژگی را به مقدار پیش‌فرض خود تنظیم کنید. به لطفاً مراجعه کنید initial.
inherit این ویژگی را از عنصر والد خود ارث می‌برد. به لطفاً مراجعه کنید inherit.

جزئیات فنی

مقدار پیش‌فرض: ease
مقدار بازگشتی: رشته‌ای که بیانگر ویژگی animation-timing-function.
نسخه CSS: CSS3

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

animationTimingFunction این یک ویژگی CSS3 (1999) است.

همه مرورگرها این را کاملاً پشتیبانی می‌کنند:

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
پشتیبانی پشتیبانی پشتیبانی پشتیبانی پشتیبانی 11

صفحات مرتبط

دستورالعمل‌های CSS:ویژگی animation-timing-function