Η transition-durationιδιότητα, που συνήθως χρησιμοποιείται ως τμήμα της transitionστενογραφίας, χρησιμοποιείται για τον καθορισμό της διάρκειας μιας καθορισμένης μετάβασης. Δηλαδή, το χρονικό διάστημα που θα χρειαστεί για τη μετάβαση του στοχευμένου στοιχείου μεταξύ δύο καθορισμένων καταστάσεων.
.example ( transition-duration: 3s; )Η τιμή μπορεί να είναι ένα από τα ακόλουθα:
- Μια έγκυρη τιμή χρόνου (ορίζεται σε δευτερόλεπτα ή χιλιοστά του δευτερολέπτου)
- Μια λίστα τιμών χρόνου διαχωρισμένων με κόμμα, για τη μετάβαση πολλών ιδιοτήτων σε ένα μόνο στοιχείο
Η προεπιλεγμένη τιμή transition-durationείναι 0s, που σημαίνει ότι δεν θα πραγματοποιηθεί μετάβαση και η αλλαγή ιδιότητας θα πραγματοποιηθεί αμέσως, ακόμη και αν έχουν οριστεί οι άλλες ιδιότητες που σχετίζονται με τη μετάβαση. Η τιμή του χρόνου μπορεί να εκφραστεί ως δεκαδικός αριθμός για ακριβέστερο χρονισμό και δεν επιτρέπονται αρνητικές τιμές.
Το ακόλουθο CodePen δείχνει ένα εφέ αιωρηματοποίησης σε ένα πλαίσιο που χρησιμοποιεί μια transition-durationτιμή για 1sνα αλλάξει σταδιακά το χρώμα του φόντου:
Για συμβατότητα σε όλα τα υποστηρικτικά προγράμματα περιήγησης, απαιτούνται προθέματα προμηθευτών, με την τυπική σύνταξη να δηλώνεται τελευταία:
.example ( -webkit-transition-duration: 700ms; -moz-transition-duration: 700ms; -o-transition-duration: 700ms; transition-duration: 700ms; )Το IE10 (η πρώτη σταθερή έκδοση του IE που υποστηρίζει transition-duration) δεν απαιτεί το -ms-πρόθεμα.
Υποστήριξη προγράμματος περιήγησης
| Χρώμιο | Σαφάρι | Firefox | ΛΥΡΙΚΗ ΣΚΗΝΗ | ΙΕ | Android | iOS |
|---|---|---|---|---|---|---|
| Εργα | Εργα | 4+ | 10.5+ | 10+ | 2.1+ | 3.2+ |