Καμπύλη χαλάρωσης CSS σε στυλ αναπήδησης

Αυτή η σελίδα ανοίγει τη γεννήτρια με x1=0,68, y1=-0,55, x2=0,265, y2=1,55 ήδη φορτωμένο — μια καμπύλη υπέρβασης που ορισμένες βιβλιοθήκες διευκολύνουν την ετικέτα easeOutBack. Το αρνητικό y1 και το y2 πάνω από το 1 είναι ακριβώς ο λόγος που η προεπισκόπηση κινούμενων εικόνων παρακάτω τραβάει πίσω από την αρχή και μετά το τέλος του προτού τακτοποιηθεί. σύρετε είτε τη λαβή είτε επεξεργαστείτε τους αριθμούς για να κάνετε το εφέ πιο δυνατό ή πιο απαλό.

Για να είμαστε ειλικρινείς σχετικά με το τι είναι αυτό: μια καμπύλη cubic-bezier() έχει μόνο δύο σημεία ελέγχου, επομένως μπορεί να προσεγγίσει μια κίνηση υπέρβασης και καθίζησης, όχι μια γνήσια φυσική αναπήδηση πολλαπλών αναπήδησης με πολλά μειωμένα άλματα. Για ένα κυριολεκτικό εφέ αναπήδησης μπάλας θα χρειαστείτε πολλαπλά βασικά καρέ ή τμήματα step() αλυσοδεμένα μεταξύ τους — αυτή η καμπύλη είναι ό,τι πιο κοντά μπορεί να έχει μια απλή συνάρτηση μετάβασης-χρονομέτρησης σε μια γραμμή.

Αυτή η μεμονωμένη υπέρβαση εξακολουθεί να είναι ακριβώς αυτό που θέλει το πιο bouncy UI: ένα κουμπί που ξεφεύγει λίγο πέρα από το μέγεθός του, ένα modal που ξεπερνάει προτού τακτοποιηθεί, ένα φύλλο που ανοίγει στη θέση του. Αντιγράψτε την τιμή ως έχει για αυτήν την ευχάριστη αίσθηση ή μαλακώστε το y1 προς το 0 και το y2 προς το 1 για να καλέσετε την υπέρβαση προς τα πίσω.