Οι πραγματικοί αριθμοί πίσω από το CSS ease-in-out

Αυτή η σελίδα ανοίγει τη γεννήτρια cubic-bezier με x1=0,42, y1=0, x2=0,58, y2=1 ήδη φορτωμένο — τα ακριβή σημεία ελέγχου στα οποία επεκτείνεται η λέξη-κλειδί ease-in-out CSS. Σύρετε οποιαδήποτε λαβή ή επεξεργαστείτε τους αριθμούς απευθείας, και η καμπύλη, η προεπισκόπηση κινούμενων εικόνων και η συμβολοσειρά με δυνατότητα αντιγραφής ενημερώνονται αμέσως.

Το ease-in-out είναι μία από τις πέντε ενσωματωμένες λέξεις-κλειδιά χρονισμού CSS και είναι δημοφιλές ακριβώς επειδή αυτή η καμπύλη επιταχύνεται απαλά από την αρχή, κρατά έναν αρκετά ομοιόμορφο ρυθμό στη μέση και χαλαρώνει πριν από το τέλος — ένα σχήμα που είναι φυσικό για τις περισσότερες κινήσεις διεπαφής χρήστη. Βλέποντάς το ως ρητά σημεία ελέγχου αντί για όνομα λέξης-κλειδιού καθιστά προφανές γιατί: το y1 βρίσκεται κοντά στο 0 και το y2 βρίσκεται κοντά στο 1, και τα δύο κοντά στο αντίστοιχο x, επομένως δεν υπάρχει υπέρβαση προς καμία κατεύθυνση.

Χρησιμοποιήστε αυτούς τους τέσσερις αριθμούς ως σημείο εκκίνησης και όχι την ίδια τη λέξη-κλειδί κάθε φορά που χρειάζεται να ωθήσετε ελαφρώς την αίσθηση — τραβήξτε το x1 προς τα κάτω για πιο γρήγορη εκκίνηση ή πιέστε το y2 πάνω από το 1 για να μετατρέψετε αυτό το ίδιο σχήμα σε μια απαλή υπέρβαση. Κάθε αλλαγή ενημερώνει αμέσως την προεπισκόπηση και τη γραμμή cubic-bezier() με δυνατότητα αντιγραφής.