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

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

Σύνταξη

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

Τιμές

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

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

Σύγκριση διαφορετικών τιμών

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

Δείτε επίσης

την ιδιότητα animation,
που είναι μια συντόμευση για κινήσεις
την εντολή @keyframes,
που ορίζει τα βασικά καρέ μιας κίνησης
τις ομαλές μεταβάσεις transition, που αντιπροσωπεύουν κίνηση όταν το ποντίκι περνάει πάνω από ένα στοιχείο