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

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

animationFillMode Η ιδιότητα καθορίζει το στυλ που θα εφαρμοστεί στο στοιχείο όταν η αニμασιών δεν παίζει ( όταν τελειώνει η αニμασιών ή υπάρχει "αναμονή" ).

Προεπιλεγμένα, οι CSS αニμασιών δεν επηρεάζουν το στοιχείο που εκτελεί την αニμασιών πριν από την εκτέλεση του πρώτου πλαισίου και σταματούν να επηρεάζουν το στοιχείο μετά την ολοκλήρωση του τελευταίου πλαισίου.animationFillMode Η ιδιότητα μπορεί να καλύψει αυτό το comportment.

Παράδειγμα

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

document.getElementById("myDIV").style.animationFillMode = "forwards";

Προσωπική δοκιμή

Γλωσσική δομή

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

object.style.animationFillMode

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

object.style.animationFillMode = "none|forwards|backwards|both|initial|inherit"

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

Τιμή Περιγραφή
μηδέν Προεπιλεγμένη τιμή. Η αニμασιών δεν θα εφαρμόσει οποιοδήποτε στυλ στο στόχο πριν ή μετά την εκτέλεση.
forwards Μετά το τέλος της αニμασιών ( αποφασισμένο από το animation-iteration-count ), η αニμασιών θα εφαρμόσει αυτή την τιμή στην τέλεια κατάσταση της αニμασιών.
backwards

Στο διάστημα που ορίζεται από το animation-delay, η αニμασιών θα εφαρμόσει τις τιμές των πλαισίων που ορίζονται από το κλειδί, που θα ξεκινήσει την πρώτη επανάληψη της αニμασιών.

Αυτές είναι οι τιμές από τα κλειδιά του πλαισίου ( όταν η κατεύθυνση της αニμασιών είναι "normal" ή "alternate" ) ή οι τιμές προς τα κλειδιά του πλαισίου ( όταν η κατεύθυνση της αニμασιών είναι "reverse" ή "alternate-reverse" ).
both Η αニμασιών遵循向前和向后的规则。也就是说，它将在两个方向上扩展动画属性。
initial Ρυθμίστε αυτή την ιδιότητα στην προεπιλεγμένη της τιμή. Δείτε initial.
inherit Εκτρέπεται αυτή η ιδιότητα από το γονικό στοιχείο. Δείτε inherit.

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

Προεπιλεγμένη τιμή: μηδέν
Αποτελεσματική τιμή: Συνημμένος χαρακτήρας που εκφράζει το στοιχείο animation-fill-mode 属性.
Έκδοση CSS: CSS3

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

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

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

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

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

CSS Εγχειρίδιο Συνάρτησης:animation-fill-mode 属性