Ιδιότητα transition-delay

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

Σύνταξη

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

Τιμές

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

Παράδειγμα

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

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

css#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 δευτερόλεπτα (χρόνος αλλαγής πλάτους). Εάν απομακρύνετε το ποντίκι - οι αλλαγές θα συμβούν με αντίστροφη σειρά: πρώτα θα μειωθεί το πλάτος, και μετά θα μειωθεί το ύψος:

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

css#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;
}

Результат:

Δείτε επίσης