Ιδιότητα 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,
με την οποία μπορείτε να δημιουργήσετε κινούμενα σχέδια