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