Αξία Animation CSS

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

animation Η ιδιότητα είναι μια συντομευμένη ιδιότητα που χρησιμοποιείται για να ρυθμίσει έξι ιδιότητες αニμασιών:

Σημειώσεις:Παρακαλώ καθορίστε πάντα: animation-duration Εάν δεν οριστεί η ιδιότητα, η διάρκεια είναι 0 και η αнимация δεν παίζει.

Παρακαλώ δείτε επίσης:

Εκμάθηση CSS3:CSS κίνηση

HTML DOM Εγχειρίδιο Εφαρμογής:property animation

Παράδειγμα

Χρησιμοποιήστε το συντομευμένο ατрибούτο για να συνδέσετε την αнимация με το στοιχείο div:

div
{
animation:mymove 5s infinite;
}

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

Γλώσσα CSS

animation: name duration timing-function delay iteration-count direction;
Τιμή Περιγραφή
animation-name Ορίζει το όνομα του keyframe που πρέπει να συνδεθεί με τον επιλογέα.
animation-duration Ορίζει τον χρόνο που απαιτείται για την ολοκλήρωση της αнимации, σε δευτερόλεπτα ή χιλιοδευτερόλεπτα.
animation-timing-function Ορίζει την καμπύλη ταχύτητας της αнимации.
animation-delay Ορίζει την καθυστέρηση πριν ξεκινήσει η αнимация.
animation-iteration-count Ορίζει τον αριθμό των φορών που θα αναπαρασταθεί η αнимация.
animation-direction Ορίζει αν η αнимация θα αναπαρασταθεί εναλλάξ αντίστροφα.
animation-fill-mode Ορίζει τις τιμές που εφαρμόζονται πέρα από το χρόνο εκτέλεσης της αнимации.
animation-play-state Ορίζει αν η αнимация είναι σε λειτουργία ή σε παύση.

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

Προεπιλεγμένη τιμή: none 0 ease 0 1 normal
Inheritance: no
Έκδοση: CSS3
Γλώσσα JavaScript: object.style.animation="mymove 5s infinite"

Υποστήριξη προγράμματος περιήγησης

Τα αριθμητικά στην τάβλη δείχνουν την πρώτη έκδοση του προγράμματος περιήγησης που υποστηρίζει πλήρως την ιδιότητα.

Τα αριθμητικά με -webkit-、-moz- ή -o- δείχνουν την πρώτη έκδοση που χρησιμοποιείται ως πρόθεμα.

Chrome IE / 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-