الأدوات · CSS · مولّد منحنى cubic-bezier · الأدلة
أدلة مولّد منحنى cubic-bezier
ثلاث قراءات قصيرة: لماذا يهم هذا الأمر، وكيفية القيام به خطوة بخطوة، وحالة استخدام واحدة محددة.
Why Easing Matters More Than Duration in UI Animation
Two transitions with the same duration can feel quick or sluggish depending only on their timing curve. What a cubic-bezier curve actually describes, and why the right one makes an interface feel responsive.
اقرأ الدليلHow to Create a Custom cubic-bezier() Easing Curve for CSS
Start from a preset, drag the two handles, compare the motion against linear and ease at the duration you will really use, and copy both the value and a ready transition line. The steps, with the limits the tool really has.
اقرأ الدليلAn Overshoot Menu Animation With ease-out-back, and Its Two Bugs
An ease-out-back curve makes a dropdown pop open and settle. It also makes the menu overshoot on the way closed, does nothing on opacity, and can poke out of a clipped container. The whole job, with the fixes.
اقرأ الدليل