Γεννήτρια CSS Cubic Bezier

Η καμπύλη ξεκινά από κάτω αριστερά (αρχή) και καταλήγει πάνω δεξιά (τέλος), με τον χρόνο να κυλά από αριστερά προς τα δεξιά και την πρόοδο να κινείται προς τα πάνω. Οι δύο λαβές είναι τα σημεία ελέγχου που τη λυγίζουν — καθεμία έχει συντεταγμένες 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 μπορεί να κάνει προετοιμασία κίνησης (anticipation) και υπέρβαση ορίου (overshoot) — τα πρότυπα «back» τραβούν τη μία λαβή έξω από το πλαίσιο για να κάνουν ακριβώς αυτό — αλλά μπορεί να κινηθεί μόνο προς μία κατεύθυνση και μετά να σταθεροποιηθεί. Τα εφέ αναπήδησης (bounce) ή ελαστικότητας (elastic) αλλάζουν κατεύθυνση αρκετές φορές, κάτι που δεν μπορεί να εκφραστεί με μία μόνο καμπύλη cubic-bezier. Για αυτά απαιτούνται CSS keyframes ή η συνάρτηση linear() με πολλά σημεία.