CSS مولد بيزير مكعب

يمتد المنحنى من أسفل اليسار (البداية) إلى أعلى اليمين (النهاية)، ويتقدم الزمن من اليسار إلى اليمين بينما يرتفع التقدم إلى أعلى. المقبضان هما نقطتا التحكم اللتان تثنيان المنحنى — ولكل منهما X وY، فتكون الصيغة معًا cubic-bezier(x1, y1, x2, y2). تبقى X بين 0 و1، بينما يمكن أن تتجاوز Y الحد العلوي أو السفلي لجعل الحركة تتخطى الهدف أو تتراجع قبل أن تستقر.

انسخ الدالة cubic-bezier() وضعها في أي موضع يقبل دالة توقيت، مثل transition-timing-function أو animation-timing-function أو الصيغة المختصرة؛ مثال: transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). الكلمات المفتاحية ease وease-in وease-out وease-in-out ليست سوى منحنيات cubic-bezier ثابتة، لذا يعرض اختيار أحد هذه الإعدادات المسبقة القيمة الدقيقة المقابلة للكلمة المفتاحية.

ليس بمفرده. يمكن لمنحنى cubic-bezier واحد أن يهيئ للحركة ويتجاوز الهدف — إذ تسحب إعدادات «الرجوع» المسبقة أحد المقبضين خارج الصندوق لهذا الغرض — لكنه لا يستطيع سوى التحرك في اتجاه واحد ثم الاستقرار. أما تأثيرا الارتداد والمرونة فيعكسان الاتجاه عدة مرات، وهو ما لا يستطيع منحنى cubic-bezier واحد التعبير عنه؛ بل يتطلبان إطارات CSS مفتاحية أو الدالة linear() ذات نقاط التوقف المتعددة.