Ιδιότητα αнимάτισης του style
- Προηγούμενη σελίδα alignSelf
- Επόμενη σελίδα animationDelay
- Επιστροφή στο προηγούμενο επίπεδο Οντότητα HTML DOM Style
Ορισμός και χρήση
animation
Η ιδιότητα είναι μια σύντομη μορφή για έξι ιδιότητες αнимάτισης:
- animationName
- animationDuration
- animationTimingFunction
- animationDelay
- Καθορίζει την καθυστέρηση πριν ξεκινήσει η κίνηση.
- Καθορίζει πόσες φορές θα παίξει η κίνηση.
Σημείωση:Παρακαλώ ορίστε πάντα Ιδιότητα 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
- Προηγούμενη σελίδα alignSelf
- Επόμενη σελίδα animationDelay
- Επιστροφή στο προηγούμενο επίπεδο Οντότητα HTML DOM Style