Ιδιότητα transition

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

Σύνταξη

cssεπιλογέας {
  transition: τιμή;
}

Η σειρά των ιδιοτήτων δεν έχει σημασία, ωστόσο ο χρόνος διάρκειας (transition-duration) πρέπει να μπαίνει πριν από την καθυστέρηση (transition-delay).

Τιμές

Δείτε τις αντίστοιχες ιδιότητες. Προεπιλεγμένη τιμή: all 0s ease 0s.

Η τιμή none ακυρώνει όλες τις μεταβάσεις (θα γίνονται ακαριαίες).

Παράδειγμα

Περάστε το ποντίκι πάνω από το μπλοκ - για 3 δευτερόλεπτα δεν θα συμβαίνει τίποτα (υπάρχει καθυστέρηση 3s), και στη συνέχεια θα αλλάξει ομαλά το πλάτος του σε 2 δευτερόλεπτα. Αν στη συνέχεια απομακρύνετε το ποντίκι - πάλι για 3 δευτερόλεπτα δεν θα συμβαίνει τίποτα, και στη συνέχεια το πλάτος θα μειωθεί ομαλά στην αρχική του τιμή:

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  transition: width 2s ease 3s;
  width: 100px;
  height: 50px;
}
#elem:hover {
  width: 400px;
}

Результат:

Δείτε επίσης