מאפיין transition-timing-function

מאפיין transition-timing-function (פונקציית easing) מתאר איך מחושבים הערכים הביניים של המעבר. ערך ההתחלה הוא ease.

.box { transition-timing-function: ease-in-out; }

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

linearהתקדמות אחידה בקצב קבוע.

easeערך ברירת המחדל. שווה ערך ל-cubic-bezier(0.25, 0.1, 0.25, 1).

ease-inמתחיל לאט ובהדרגה מאיץ. cubic-bezier(0.42, 0, 1, 1).

ease-outמתחיל מהר ומאט לקראת הסוף. cubic-bezier(0, 0, 0.58, 1).

ease-in-outלאט בהתחלה ובסוף, מהיר באמצע.

step-startקופץ מיד לערך הסופי. steps(1, start).

step-endשומר על הערך ההתחלתי וקופץ לסופי בסיום. steps(1, end).

cubic-bezier()cubic-bezier(x1, y1, x2, y2) — עקומה מותאמת. ערכי y יכולים לחרוג מ-[0,1] לאפקטי חריגה.

linear()linear() — האטה/האצה ליניארית עם נקודות בקרה מותאמות.

CSS Transitions Module Level 1

Working Draft

Hover over me

Show all code