Συνάρτηση μετάβασης-χρόνου - CSS-Κόλπα

Η transition-timing-functionιδιότητα, που συνήθως χρησιμοποιείται ως τμήμα της transitionστενογραφίας, χρησιμοποιείται για να ορίσει μια συνάρτηση που περιγράφει πώς θα προχωρήσει μια μετάβαση κατά τη διάρκεια της, επιτρέποντας μια μετάβαση να αλλάξει ταχύτητα κατά τη διάρκεια της πορείας της.

.example ( transition-timing-function: ease-out; )

Αυτές οι συναρτήσεις χρονισμού ονομάζονται συνήθως λειτουργίες χαλάρωσης και μπορούν να οριστούν χρησιμοποιώντας μια προκαθορισμένη τιμή λέξης-κλειδιού, μια συντελεστή βήματος ή μια κυβική καμπύλη Bézier.

Οι προκαθορισμένες τιμές λέξεων-κλειδιών που επιτρέπονται είναι:

ευκολία
γραμμικός
ευκολία
ευκολία
ευκολία-έξω
βήμα-εκκίνηση
τέλος-βήμα

Για ορισμένες τιμές, το αποτέλεσμα μπορεί να μην είναι τόσο προφανές, εκτός εάν η διάρκεια μετάβασης έχει οριστεί σε μεγαλύτερη τιμή.

Κάθε μία από τις προκαθορισμένες λέξεις-κλειδιά έχει ισοδύναμη κυβική τιμή καμπύλης Bézier ή ισοδύναμη τιμή λειτουργίας βηματισμού. Για παράδειγμα, οι ακόλουθες δύο τιμές συνάρτησης χρονισμού θα είναι ισοδύναμες μεταξύ τους:

.example ( transition-timing-function: ease-out; ) .example-2 ( transition-timing-function: cubic-bezier(0, 0, 0.58, 1); )

Όπως και τα ακόλουθα δύο:

.example ( transition-timing-function: step-start; ) .example-2 ( transition-timing-function: steps(1, start); )

Χρησιμοποιώντας τα βήματα () και τις καμπύλες Bézier

Η steps()λειτουργία σάς επιτρέπει να καθορίζετε διαστήματα για τη λειτουργία χρονισμού. Χρειάζονται μία ή δύο παραμέτρους, διαχωρισμένες με κόμμα: θετικός ακέραιος και προαιρετική τιμή οποιουδήποτε startή end. Εάν δεν περιλαμβάνεται δεύτερη παράμετρος, θα προεπιλεγεί end.

Για να κατανοήσετε τις λειτουργίες ενίσχυσης, ακολουθεί μια επίδειξη που χρησιμοποιεί steps(4, start)για το πλαίσιο στα αριστερά και steps(4, end)για το πλαίσιο στα δεξιά (τοποθετήστε το δείκτη πάνω από ένα πλαίσιο ή φορτώστε ξανά το πλαίσιο για να δείτε τις μεταβάσεις):

Δείτε αυτό το στυλό!

Όταν startκαθορίζεται, η αλλαγή των τιμών πραγματοποιείται στην αρχή κάθε διαστήματος, ενώ endπροκαλεί την αλλαγή των τιμών στο τέλος κάθε διαστήματος.

Μια λεπτομερής ματιά στις τιμές καμπύλης Bézier είναι πέρα από το πεδίο αυτής της αναφοράς, ωστόσο, δείτε τις αναφορές στην ενότητα σχετικών συνδέσμων για εργαλεία που δείχνουν οπτικά πώς λειτουργούν αυτές οι τιμές.

Για συμβατότητα σε όλα τα υποστηρικτικά προγράμματα περιήγησης, απαιτούνται προθέματα προμηθευτών, με την τυπική σύνταξη να δηλώνεται τελευταία:

.example ( -webkit-transition-timing-function: ease-in-out; -moz-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; )

Το IE10 (η πρώτη σταθερή έκδοση του IE που υποστηρίζει transition-timing-function) δεν απαιτεί το -ms-πρόθεμα.