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

Ορισμός και χρήση

animation-timing-function Ορίζει την ταχύτητα καμπύλη της κίνησης.

Η καμπύλη ταχύτητας ορίζει το χρόνο που απαιτείται για την αλλαγή από ένα σύνολο στυλ CSS σε ένα άλλο.

Η καμπύλη ταχύτητας χρησιμοποιείται για να κάνει τις αλλαγές πιο ομαλές.

Δείτε επίσης:

Εκμάθηση CSS3:CSS αнимация

Βιβλίο αναφοράς HTML DOM:Επιχείρημα animationTimingFunction

Παράδειγμα

Παράδειγμα 1

Παίζει την κίνηση με την ίδια ταχύτητα από την αρχή μέχρι το τέλος:

div
{
animation-timing-function:2s;
}

Try It Yourself

Παράδειγμα 2

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

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

Try It Yourself

Παράδειγμα 3

Same as the previous example, but defines the speed curve through the cubic-bezier function:

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

Try It Yourself

CSS Syntax

animation-timing-function: value;

The 'animation-timing-function' uses a mathematical function called the cubic Bezier (Cubic Bezier) function to generate a speed curve. You can use your own values in this function, as well as predefined values:

Value Description Test
linear The speed of the animation is the same from start to finish. Test
ease Default. The animation starts slowly, then speeds up, and slows down before ending. Test
ease-in The animation starts slowly. Test
ease-out The animation ends slowly. Test
ease-in-out The animation starts and ends slowly. Test
cubic-bezier(n,n,n,n) Your own values in the cubic-bezier function. Possible values are numeric values from 0 to 1.

Tip:Try different values in the 'Try It Yourself' feature below.

Technical Details

Default Value: ease
Inheritance: no
Version: CSS3
JavaScript Syntax: object.style.animationTimingFunction="linear"

Browser Support

The numbers in the table indicate the first browser version that fully supports the property.

Using numbers with -webkit-, -moz-, or -o- prefixes indicates the first version that uses the prefix.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
43.0
4.0 -webkit-		 10.0 16.0
5.0 -moz-		 9.0
4.0 -webkit-		 30.0
15.0 -webkit-
12.0 -o-