Η ιδιότητα transition-timing-function του CSS

Definition and usage

The transition-timing-function property specifies the speed curve of the transition effect.

This property allows the transition effect to change its speed over time.

See also:

CSS Tutorial:Διαδραστικές Μεταβάσεις του CSS

HTML DOM Reference Manual:transitionTimingFunction attribute

Instance

Example 1

Transition effects from start to end at the same speed:

div
{
transition-timing-function: linear;
}

Δοκιμάστε το προσωπικά

CSS syntax

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-
bezier(n,n,n,n);

Attribute value

Value Description
linear Specify a transition effect that starts and ends at the same speed (equal to cubic-bezier(0,0,1,1)).
ease Specify a transition effect that starts slowly, then speeds up, and then ends slowly (cubic-bezier(0.25,0.1,0.25,1)).
ease-in Specify a transition effect that starts slowly (equal to cubic-bezier(0.42,0,1,1)).
ease-out Specify a transition effect that ends slowly (equal to cubic-bezier(0,0,0.58,1)).
ease-in-out Specify a transition effect that starts and ends slowly (equal to cubic-bezier(0.42,0,0.58,1)).
cubic-bezier(n,n,n,n) Define your own values in the cubic-bezier function. Possible values are numerical between 0 and 1.

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

Τεχνικά λεπτομέρειες

Προεπιλεγμένη τιμή: ease
Κληρονομικότητα: όχι
Έκδοση: CSS3
Γλώσσα σύνταξης: JavaScript έργω.style.transitionTimingFunction="linear"

Περισσότερα παραδείγματα

Παράδειγμα 2

Για να κατανοήσετε καλύτερα τις διαφορετικές τιμές των συναρτήσεων, δείτε τους πέντε διαφορετικούς div στοιχεία με πέντε διαφορετικές τιμές:

#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

Δοκιμάστε το προσωπικά

Παράδειγμα 3

Καθώς και στο προηγούμενο παράδειγμα, αλλά καθορίζεται η καμπύλη ταχύτητας μέσω του cubic-bezier:

#div1 {transition-timing-function: cubic-bezier(0,0,1,1;}
#div2 {transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {transition-timing-function: cubic-bezier(0.42,0,0.58,1);}

Δοκιμάστε το προσωπικά

Υποστήριξη του προγράμματος περιήγησης

Τα αριθμητικά στη τράπεζα δείχνουν την πρώτη έκδοση του προγράμματος περιήγησης που υποστηρίζει πλήρως αυτήν την ιδιότητα.

Τα αριθμητικά με προτιμήματα -webkit-, -moz- ή -o- δείχνουν την πρώτη έκδοση που χρησιμοποιείται με πρόθεμα.

Chrome IE / Edge Firefox Safari Opera
26.0
4.0 -webkit-		 10.0 16.0
4.0 -moz-		 6.1
3.1 -webkit-		 12.1
10.5 -o-