Μετάβαση-καθυστέρηση - CSS-Κόλπα

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

.delay-me ( transition-delay: 0.25s; )

Η τιμή μπορεί να είναι ένα από τα ακόλουθα:

Μια έγκυρη τιμή χρόνου που ορίζεται σε δευτερόλεπτα ή χιλιοστά του δευτερολέπτου π.χ. 1.3sή125ms
Μια λίστα τιμών χρόνου διαχωρισμένων με κόμμα, για τον καθορισμό ξεχωριστών τιμών καθυστέρησης σε πολλαπλές μεταβάσεις για ένα μεμονωμένο στοιχείο π.χ. 1s background-color, 350ms transform

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

Όταν μια μετάβαση έχει μια τιμή καθυστέρησης που είναι αρνητική, θα προκαλέσει την έναρξη της μετάβασης αμέσως (χωρίς καθυστέρηση), ωστόσο, η μετάβαση θα ξεκινήσει εν μέρει μέσω της διαδικασίας, σαν να είχε ήδη ξεκινήσει.

Το ακόλουθο στυλό δείχνει ένα εφέ αιωρήματος σε ένα πλαίσιο που χρησιμοποιεί μια transition-delayτιμή 2sμε διάρκεια μετάβασης 1s:

Δείτε την
επίδειξη καθυστέρησης Pen Transition από CSS-Tricks (@ css-tricks)
στο CodePen.

Τώρα συγκρίνετε αυτό με το ακόλουθο demo, το οποίο έχει καθυστέρηση -1sκαι διάρκεια 3s:

Δείτε την
επίδειξη καθυστέρησης μετάβασης αρνητικής πένας από CSS-Tricks (@ css-tricks)
στο CodePen

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

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

.example ( -webkit-transition-delay: 500ms; -moz-transition-delay: 500ms; -o-transition-delay: 500ms; transition-delay: 500ms; )

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

Μια κοινή περίπτωση χρήσης είναι οι εντυπωσιακές μεταβάσεις:

Δείτε το Pen
Staggered Animations από τον Chris Coyier (@chriscoyier)
στο CodePen.

Υποστήριξη προγράμματος περιήγησης

Αυτά τα δεδομένα υποστήριξης του προγράμματος περιήγησης προέρχονται από την Caniuse, η οποία έχει περισσότερες λεπτομέρειες. Ένας αριθμός υποδεικνύει ότι το πρόγραμμα περιήγησης υποστηρίζει τη λειτουργία σε αυτήν την έκδοση και νεότερη.