ویژگی animationTimingFunction استایل

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

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

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

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

مثال

ویژگی animationTimingFunction <div> تغییر می‌کند:

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

آزمایش کنید

قوانین

ویژگی animationTimingFunction بازگردانده شود:

موضوع.style.animationTimingFunction

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

موضوع.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(ن, ن, ن, ن)

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

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

جزئیات فنی

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

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

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

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

کروم ایج فایرفاکس سافاری اُپرا IE
کروم ایج فایرفاکس سافاری اُپرا IE
پشتیبانی می‌کند پشتیبانی می‌کند پشتیبانی می‌کند پشتیبانی می‌کند پشتیبانی می‌کند 11

صفحات مرتبط

CSS 参考手册：animation-timing-function 属性