css animation animation-timing-function

✔️ animation-timing-function CSS Style Property

המאפיין animation-timing-function מציין את תאוצת המהירות של אנימציה.

תאוצת המהירות מגדירה את הזמן שלוקח לאנימציה לעבור מסט אחד של סגנונות CSS לאחר בצורה חלקה

דוגמא: ריק

Demo Panel:
CSS:
HTML:
Syntax:

animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int,start | end) | cubic-bezier(n,n,n,n) | initial | inherit;

Valid values:
  • linear, ease, ease-in, ease-out, ease-in-out, step-start, step-end, initial, inherit

Js Syntax: element.style.animationTimingFunction

תאימות דפדפנים

animation-timing-function
הערך שנבדקChromeFirefoxEdgeCOpera
linear✔️✔️✔️✔️
ease✔️✔️✔️✔️
ease-in✔️✔️✔️✔️
ease-out✔️✔️✔️✔️
ease-in-out✔️✔️✔️✔️
step-start✔️✔️✔️✔️
step-end✔️✔️✔️✔️
initial✔️✔️✔️✔️
inherit✔️✔️✔️✔️