Ιδιότητα transition-timing-function

Η ιδιότητα transition-timing-function ορίζει την ταχύτητα αλλαγής (επιτάχυνση) της ομαλής μετάβασης transition. Για παράδειγμα, αρχικά αργά, μετά γρήγορα, μετά αργά κ.ο.κ.

Σύνταξη

επιλογέας {
	transition-timing-function: τιμή;
}

Τιμές

Τιμή	Περιγραφή
`ease`	Αρχικά αργά, μετά γρήγορα, στο τέλος πάλι αργά.
`ease-in`	Ξεκινάει αργά και σταδιακά επιταχύνει.
`ease-out`	Ξεκινάει γρήγορα και σταδιακά σταματάει.
`ease-in-out`	Αρχικά αργά, μετά γρήγορα, στο τέλος πάλι αργά. Διαφέρει από το ease στην ταχύτητα.
`linear`	Πάντα η ίδια ταχύτητα.
`step-start`	Δεν υπάρχει κινούμενο σχέδιο, η ιδιότητα παίρνει αμέσως την τελική τιμή.
`step-end`	Δεν υπάρχει κινούμενο σχέδιο, η ιδιότητα περιμένει το χρόνο, που ορίζεται στο `transition-duraton`, και μετά αμέσως παίρνει την τελική τιμή.
`steps`	Η τιμή της ιδιότητας αλλάζει με άλματα.
`cubic-bezier`	Καμπύλη Bezier, που μπορεί να ορίσει αυθαίρετο κινούμενο σχέδιο. Δείτε γεννήτρια καμπυλών Bezier.

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

Σύγκριση διαφόρων τιμών

Περάστε το ποντίκι πάνω από τα παρακάτω πλαίσια, για να δείτε τη λειτουργία όλων των τύπων χρονικών συναρτήσεων:

Παράδειγμα

Περάστε το ποντίκι πάνω από το πλαίσιο - θα αλλάξει ομαλά το πλάτος του σε 2 δευτερόλεπτα. Εφόσον έχει οριστεί η τιμή ease-in, το κινούμενο σχέδιο θα ξεκινήσει αργά και θα επιταχύνει σταδιακά:

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

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

Δείτε επίσης

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