Ιδιότητα animationTimingFunction του στυλ

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

animationTimingFunction Ορίζει την καμπύλη ταχύτητας της αニμάσισης.

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

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

Παράδειγμα

Αλλαγή της ιδιότητας animationTimingFunction του στοιχείου <div>:

document.getElementById("myDIV").style.animationTimingFunction = "linear";

Προσπαθήστε το προσωπικά

Γραμματική

Επιστροφή της ιδιότητας animationTimingFunction:

object.style.animationTimingFunction

Ρύθμιση της ιδιότητας animationTimingFunction:

object.style.animationTimingFunction = "linear|ease|ease-in|ease-out|cubic-bezier(n, n, n, n)|initial|inherit"

Τιμή ιδιότητας

Τιμή Περιγραφή
linear Η ταχύτητα της αニμάσισης είναι ίση από την αρχή μέχρι το τέλος.
ease Προεπιλεγμένη τιμή. Η αニμάσιση ξεκινά αργά, τότε επιταχύνει και τελειώνει αργά.
ease-in Η αニμάσιση ξεκινά αργά.
ease-out Η αニμάσιση τελειώνει αργά.
ease-in-out Η αニμάσιση έχει αργό ξεκίνημα και αργό τέλος.
cubic-bezier(n, n, n, n)

Ορίστε τα δικά σας στοιχεία στη τριγωνική βεζιέ συνάρτηση.

Οι πιθανές τιμές είναι αριθμητικές τιμές από 0 έως 1.
initial Ρυθμίστε αυτή την ιδιότητα στη προεπιλεγμένη τιμή της. Δείτε initial.
inherit Κληρονομείται αυτή η ιδιότητα από το γονικό στοιχείο. Δείτε inherit.

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

Προεπιλεγμένη τιμή: ease
Αποτελεσματική τιμή: Συνημμένα κείμενα που εκφράζουν το στοιχείο Ιδιότητα animation-timing-function.
Έκδοση CSS: CSS3

Υποστήριξη περιηγητών

animationTimingFunction Είναι χαρακτηριστικό CSS3 (1999).

Όλοι οι περιηγητές το υποστηρίζουν πλήρως:

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
Υποστήριξη Υποστήριξη Υποστήριξη Υποστήριξη Υποστήριξη 11

Σελίδες σχετικές

Εγχειρίδιο CSS:Ιδιότητα animation-timing-function