Βασική δήλωση & χρήση
@-webkit-keyframes NAME-YOUR-ANIMATION ( 0% ( opacity: 0; ) 100% ( opacity: 1; ) ) @-moz-keyframes NAME-YOUR-ANIMATION ( 0% ( opacity: 0; ) 100% ( opacity: 1; ) ) @-o-keyframes NAME-YOUR-ANIMATION ( 0% ( opacity: 0; ) 100% ( opacity: 1; ) ) @keyframes NAME-YOUR-ANIMATION ( 0% ( opacity: 0; ) 100% ( opacity: 1; ) )#box ( -webkit-animation: NAME-YOUR-ANIMATION 5s infinite; /* Safari 4+ */ -moz-animation: NAME-YOUR-ANIMATION 5s infinite; /* Fx 5+ */ -o-animation: NAME-YOUR-ANIMATION 5s infinite; /* Opera 12+ */ animation: NAME-YOUR-ANIMATION 5s infinite; /* IE 10+, Fx 29+ */ )Για λόγους συντομίας, ο υπόλοιπος κώδικας σε αυτήν τη σελίδα δεν θα χρησιμοποιεί προθέματα, αλλά η χρήση του πραγματικού κόσμου θα πρέπει να χρησιμοποιεί όλα τα προθέματα προμηθευτών από ψηλά
Πολλαπλά βήματα
@keyframes fontbulger ( 0% ( font-size: 10px; ) 30% ( font-size: 15px; ) 100% ( font-size: 12px; ) ) #box ( animation: fontbulger 2s infinite; )Εάν ένα κινούμενο σχέδιο έχει τις ίδιες ιδιότητες έναρξης και λήξης, ένας τρόπος για να το κάνετε είναι να διαχωρίσετε με κόμμα τις τιμές 0% και 100%:
@keyframes fontbulger ( 0%, 100% ( font-size: 10px; ) 50% ( font-size: 12px; ) )Ή, θα μπορούσατε πάντα να πείτε στο κινούμενο σχέδιο να εκτελείται δύο φορές (ή οποιεσδήποτε ζυγές φορές) και να πείτε την κατεύθυνση προς alternate.
Κλήση animation καρέ με ξεχωριστές ιδιότητες
.box ( animation-name: bounce; animation-duration: 4s; /* or: Xms */ animation-iteration-count: 10; animation-direction: alternate; /* or: normal */ animation-timing-function: ease-out; /* or: ease, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) */ animation-fill-mode: forwards; /* or: backwards, both, none */ animation-delay: 2s; /* or: Xms */ )Συνοπτικό κινούμενο σχέδιο
Απλά χωρίστε όλες τις μεμονωμένες τιμές. Η παραγγελία δεν έχει σημασία παρά μόνο όταν χρησιμοποιείτε τόσο τη διάρκεια όσο και την καθυστέρηση, πρέπει να είναι σε αυτήν τη σειρά. Στο παρακάτω παράδειγμα 1s = διάρκεια, 2s = καθυστέρηση, 3 = επαναλήψεις.
animation: test 1s 2s 3 alternate backwardsΣυνδυάστε μετασχηματισμό και κινούμενα σχέδια
@keyframes infinite-spinning ( from ( transform: rotate(0deg); ) to ( transform: rotate(360deg); ) )Πολλαπλές κινούμενες εικόνες
Μπορείτε να διαχωρίσετε με κόμμα τις τιμές για να δηλώσετε πολλές κινούμενες εικόνες σε έναν επιλογέα.
.animate-this ( animation: first-animation 2s infinite, another-animation 1s; )Βήματα ()
Η λειτουργία βήματα () ελέγχει ακριβώς πόσα βασικά καρέ θα αποδώσουν στο χρονικό πλαίσιο κινούμενης εικόνας. Ας πούμε ότι δηλώνετε:
@keyframes move ( from ( top: 0; left: 0; ) to ( top: 100px; left: 100px; ) )Εάν χρησιμοποιείτε τα βήματα (10) στην κινούμενη εικόνα σας, θα διασφαλίσει ότι μόνο 10 βασικά καρέ θα πραγματοποιηθούν στον καθορισμένο χρόνο.
.move ( animation: move 10s steps(10) infinite alternate; )Τα μαθηματικά λειτουργούν καλά εκεί. Κάθε δευτερόλεπτο, το στοιχείο μετακινείται 10px προς τα αριστερά και 10px προς τα κάτω, μέχρι το τέλος της κινούμενης εικόνας και, στη συνέχεια, και πάλι σε αντίστροφη θέση για πάντα.
Αυτό μπορεί να είναι υπέροχο για κινούμενα σχέδια spritesheet όπως αυτό το demo του simurai.
Υποστήριξη προγράμματος περιήγησης
Αυτά τα δεδομένα υποστήριξης του προγράμματος περιήγησης προέρχονται από την Caniuse, η οποία έχει περισσότερες λεπτομέρειες. Ένας αριθμός υποδεικνύει ότι το πρόγραμμα περιήγησης υποστηρίζει τη λειτουργία σε αυτήν την έκδοση και νεότερη.
Επιφάνεια εργασίας
| Χρώμιο | Firefox | ΙΕ | Ακρη | Σαφάρι |
|---|---|---|---|---|
| 4 * | 5 * | 10 | 12 | 5.1 * |
Κινητό / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4 * | 6.0-6.1 * |
Περισσότεροι πόροι
- Έγγραφα MDN
- MDN: Χρησιμοποιώντας CSS Animation
- Μπορώ να χρησιμοποιήσω - Υποστήριξη προγράμματος περιήγησης
- ΒΙΝΤΕΟ: Εισαγωγή στις κινούμενες εικόνες CSS