Ιδιότητα αнимάτισης του style

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

animation Η ιδιότητα είναι μια σύντομη μορφή για έξι ιδιότητες αнимάτισης:

Σημείωση:Παρακαλώ ορίστε πάντα Ιδιότητα animationDurationΑν δεν οριστεί, η διάρκεια της αнимάτισης είναι 0 και ποτέ δεν παίζει.

Παράδειγμα

Χρήση της σύντομης ιδιότητας για να αλλάξετε την αнимάτιση του στοιχείου <div>:

document.getElementById("myDIV").style.animation = "mynewmove 4s 2";

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

Γραμματική

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

object.style.animation

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

object.style.animation = "name duration timingFunction delay iterationCount direction fillMode playState"

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

Τιμή Περιγραφή
animationName Καθορίζει το όνομα των κλειδιών καμπυλών που θα συνδεθούν με τον επιλογέα.
animationDuration Καθορίζει πόσα δευτερόλεπτα ή miliseconds χρειάζεται η κίνηση για να ολοκληρωθεί.
animationTimingFunction Καθορίζει την καμπύλη ταχύτητας της κίνησης.
animationDelay animationDelay
Καθορίζει την καθυστέρηση πριν ξεκινήσει η κίνηση. animationIterationCount
Καθορίζει πόσες φορές θα παίξει η κίνηση. animationFillMode
Καθορίζει αν η κίνηση θα παίζει αντίστροφα σε εναλλασσόμενη κύκλο. Καθορίζει την τιμή που εφαρμόζεται πέρα από το χρόνο εκτέλεσης της κίνησης.
animationPlayState Καθορίζει αν η κίνηση είναι σε εκτέλεση ή σε παύση.
initial Αναθέτει την ιδιότητα αυτή στην προεπιλεγμένη της τιμή. Δείτε επίσης initial.
inherit Επιτρέπει στην ιδιότητα αυτή να κληρονομηθεί από το γονικό στοιχείο. Δείτε επίσης inherit.

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

Προεπιλεγμένη τιμή: none 0 ease 0 1 normal none running
Αποτελεσματική τιμή: String που εκφράζει το στοιχείο Αξιοτήσεις animation.
Έκδοση CSS: CSS3

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

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

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

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

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

CSS Εγχειρίδιο αναφοράς:Αξιοτήσεις animation