Ιδιότητα transition-duration

Η ιδιότητα transition-duration ορίζει το χρόνο εκτέλεσης μιας ομαλής μετάβασης transition.

Σύνταξη

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

Τιμές

Τιμή	Περιγραφή
`s`	Ορίζει το χρόνο σε δευτερόλεπτα (π.χ. `3s`). Μπορούν να οριστούν κλασματικές τιμές, για παράδειγμα, `0.5s` - μισό δευτερόλεπτο.
`ms`	Ορίζει το χρόνο σε χιλιοστά του δευτερολέπτου (π.χ. `3ms`). Ένα δευτερόλεπτο είναι `1000` χιλιοστά του δευτερολέπτου.

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

Παράδειγμα

Περάστε το ποντίκι πάνω από το μπλοκ - αυτό θα αλλάξει ομαλά το πλάτος του σε 2 δευτερόλεπτα.

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

#elem {
	transition-duration: 2s;
	transition-property: width;
	border: 1px solid black;
	height: 50px;
	width: 100px;
}
#elem:hover {
	width: 400px;
}

Δείτε επίσης

η ιδιότητα transition-property,
που ορίζει το όνομα της ιδιότητας για ομαλή μετάβαση
η ιδιότητα transition-delay,
που ορίζει την καθυστέρηση πριν από την ομαλή μετάβαση
η ιδιότητα transition-timing-function,
που ορίζει τη χρονική συνάρτηση για ομαλή μετάβαση
η ιδιότητα transition,
που είναι η συντομογραφία για ομαλή μετάβαση
η ιδιότητα animation,
με την οποία μπορείτε να δημιουργήσετε κινούμενα σχέδια