Ιδιότητα transition-property
Η ιδιότητα transition-property ορίζει
την ιδιότητα που θα κινηματογραφηθεί με ομαλή
μετάβαση transition. Ως τιμή πρέπει
να μεταβιβαστεί το όνομα της ιδιότητας CSS που
θα κινηματογραφηθεί. Εάν οριστεί η τιμή all
(είναι η προεπιλεγμένη τιμή) - όλες οι ιδιότητες
θα κινηματογραφηθούν ταυτόχρονα.
Σύνταξη
επιλογέας {
transition-property: τιμή;
}
Παράδειγμα
Περάστε το ποντίκι πάνω από το μπλοκ - θα αλλάξει ομαλά
το πλάτος του, καθώς το transition-property
έχει τιμή width:
<div id="elem"></div>
#elem {
border: 1px solid black;
transition-duration: 2s;
transition-property: width;
height: 50px;
width: 100px;
}
#elem:hover {
width: 400px;
}
:
Παράδειγμα . Τιμή all
Σε αυτό το παράδειγμα, το transition-property
έχει τιμή all - επομένως ομαλά
θα αλλάζουν όλες οι ιδιότητες, που γράφτηκαν
για την κατάσταση hover (στην περίπτωσή μας
αυτό είναι το width και το height). Όλες οι αλλαγές
θα πραγματοποιούνται στο ίδιο χρονικό διάστημα, που ορίζεται
στο transition-duration:
<div id="elem"></div>
#elem {
border: 1px solid black;
transition-duration: 2s;
transition-property: all;
height: 25px;
width: 100px;
}
#elem:hover {
height: 50px;
width: 400px;
}
:
Δείτε επίσης
-
η ιδιότητα
transition-duration,
που ορίζει τη διάρκεια της ομαλής μετάβασης -
η ιδιότητα
transition-delay,
που ορίζει την καθυστέρηση πριν από την ομαλή μετάβαση -
η ιδιότητα
transition-timing-function,
που ορίζει τη χρονική συνάρτηση για την ομαλή μετάβαση -
η ιδιότητα
transition,
που είναι η συντομογραφία για την ομαλή μετάβαση -
η ιδιότητα
animation,
με την οποία μπορείτε να δημιουργήσετε κινούμενα σχέδια