Ιδιότητα transition-delay

Η ιδιότητα transition-delay ορίζει την καθυστέρηση πριν από την έναρξη της ομαλής μετάβασης transition.

Σύνταξη

επιλογέας {
	transition-delay: χρόνος σε s ή ms;
}

Τιμές

Τιμή	Περιγραφή
`s`	Ορίζει χρόνο σε δευτερόλεπτα (π.χ. `3s`). Μπορούν να οριστούν κλασματικές τιμές, για παράδειγμα, `0.5s` - μισό δευτερόλεπτο.
`ms`	Ορίζει χρόνο σε χιλιοστά του δευτερολέπτου (π.χ. `3ms`). Ένα δευτερόλεπτο είναι `1000` χιλιοστά του δευτερολέπτου.

Προεπιλεγμένη τιμή: 0s.

Παράδειγμα

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

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

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

Παράδειγμα

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

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

#elem {
	border: 1px solid black;
	transition-duration: 2s, 4s;
	transition-property: width, height;
	transition-delay: 0s, 3s;
	width: 100px;
	height: 25px;
}
#elem:hover {
	width: 400px;
	height: 50px;
}

Δείτε επίσης

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