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