Ιδιότητα transition

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

Σύνταξη

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

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

Τιμές

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

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

Παράδειγμα

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

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

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

Δείτε επίσης

η ιδιότητα animation,
με την οποία μπορείτε να δημιουργήσετε κινούμενα σχέδια