CSS transition 属性

Ορισμός και Χρήση

Η ιδιότητα transition είναι μια συντομευμένη ιδιότητα που χρησιμοποιείται για να ρυθμίσετε τις τέσσερις ιδιότητες της διαδρομής.

Σημειώσεις:Προτείνεται να ρυθμίζετε πάντα transition-duration Αν δεν οριστεί η ιδιότητα, η διάρκεια είναι 0 και δεν θα προκύψει διαδρομή μεταβατικής επιδράσεως.

Δείτε επίσης:

Εκμάθηση CSSCSS Μεταβατική

Εγχειρίδιο HTML DOMΠρότυπο transition

Παράδειγμα

Βάλε τον δείκτη του ποντικιού στο στοιχείο div, η πλάτος του θα αλλάξει από 100px σε 300px:

div {
  width: 100px;
  transition: width 2s;
}

Προσπάθησε να το δοκιμάσεις

Γλώσσα CSS

transition: property duration timing-function delay;

Τιμή Προπληροφορίας

Τιμή Περιγραφή
transition-property Ορίζει το όνομα των CSS properties που ορίζουν την επιδράση της διαδρομής.
transition-duration Ορίζει τον χρόνο ή τα miliseconds που απαιτούνται για την ολοκλήρωση της διαδρομής μεταβατικής επιδράσεως.
transition-timing-function Ορίζει τη courbe της ταχύτητας της επίδρασης.
transition-delay Ορίζει πότε ξεκινά η διαδρομή μεταβατικής επιδράσεως.

Τεχνικά Στοιχεία

Προεπιλεγμένη τιμή: all 0 ease 0
Εκδοχικότητα: no
Έκδοση: CSS3
Γλώσσα Γραμματοσειράς JavaScript: object.style.transition="width 2s"

Υποστήριξη Περιηγητών

Οι αριθμοί στη τράπεζα αναφέρουν την πρώτη έκδοση του περιηγητή που υποστηρίζει πλήρως το χαρακτηριστικό.

Τα αριθμητικά με -webkit-, -moz- ή -o- δείχνουν την πρώτη έκδοση που χρησιμοποιείται με πρόθεμα.

Chrome IE / Edge Firefox Safari Opera
26.0
4.0 -webkit-		 10.0 16.0
4.0 -moz-		 6.1
3.1 -webkit-		 12.1
10.5 -o-