מאפיין animation-timing-function

מאפיין animation-timing-function (פונקציית easing) מתאר איך האנימציה מתקדמת בין זוגות keyframes. ערך ההתחלה הוא ease.

.box { animation-timing-function: ease-out; }

.bounce { animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55); }

linearקצב אחיד.

easeערך ברירת המחדל. מהיר בהתחלה, מאט בסוף.

ease-inמתחיל לאט.

ease-outמסתיים לאט.

ease-in-outלאט בקצוות.

step-startקופץ מיד לערך הסופי.

step-endקופץ לערך הסופי בסוף.

cubic-bezier()עקומה מותאמת (x1,y1,x2,y2).

steps()חלוקה למקטעים — steps(n, position?).

linear()easing ליניארי עם נקודות בקרה.

CSS Animations Level 1

Editor's Draft

CSS

Show all code