مولد CSS Easing

cubic-bezier هي دالة CSS تحدد منحنى سرعة الرسوم المتحركة، توصف عبر منحنى بيزيه تكعيبي من خلال نقطتي تحكم: P1 (x1, y1) و P2 (x2, y2). يمثل المحور السيني للمنحنى تقدم الوقت (0→1)، ويمثل المحور الصادي تغير الخاصية (0→1). المنحنى الأكثر انحداراً يعني سرعة أسرع؛ المنحنى الأكثر انبساطاً يعني سرعة أبطأ.

استخدمه مباشرة في خصائص CSS transition أو animation: transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);. منطقة إخراج الكود في المولد تنتج تلقائياً كود CSS الصحيح. اضغط نسخ للصق واستخدامه مباشرة.

CSS cubic-bezier() يتطلب أن تكون قيم X بين 0 و 1 (المقابلة للوقت من البداية إلى النهاية)، وقيم Y تكون عادة بين 0 و 1 لكن يمكن أن تتجاوز هذا النطاق (لإنشاء تأثيرات الارتداد). هذه الأداة تقيد X بـ [0, 1] و Y بـ [0, 1] لضمان أن المنحنيات المولدة هي دوال تخفيف CSS صالحة.

ease: سريع ثم بطيء ثم سريع، مناسب للانتقالات العامة.
ease-in: بطيء إلى سريع، مناسب لرسوم الخروج (عناصر تغادر).
ease-out: سريع إلى بطيء، مناسب لرسوم الدخول (عناصر تدخل)، الأكثر استخداماً.
ease-in-out: بطيء عند كلا الطرفين، سريع في المنتصف، أكثر نعومة من ease.
linear: سرعة ثابتة، مناسب للرسوم التي لا تحتاج تسارعاً.