Το animationακίνητο στο CSS μπορεί να χρησιμοποιηθεί για να εμψυχώσει πολλές άλλες ιδιότητες CSS όπως color, background-color, height, ή width. Κάθε κινούμενη εικόνα πρέπει να οριστεί με τον @keyframesκανόνα at που καλείται στη συνέχεια με την animationιδιότητα, όπως έτσι:
.element ( animation: pulse 5s infinite; ) @keyframes pulse ( 0% ( background-color: #001F3F; ) 100% ( background-color: #FF4136; ) )Κάθε @keyframesκανόνας καθορίζει τι πρέπει να συμβαίνει σε συγκεκριμένες στιγμές κατά τη διάρκεια της κινούμενης εικόνας. Για παράδειγμα, το 0% είναι η αρχή της κίνησης και το 100% είναι το τέλος. Αυτά τα βασικά καρέ μπορούν στη συνέχεια να ελεγχθούν είτε από τη στενή animationιδιότητα, είτε από τις οκτώ δευτερεύουσες ιδιότητές της, για να δώσουν περισσότερο έλεγχο στον τρόπο χειρισμού αυτών των βασικών καρέ.
Υπο-ιδιότητες
animation-name: δηλώνει το όνομα του@keyframesat-rule για χειρισμό.animation-duration: το χρονικό διάστημα που απαιτείται για μια κινούμενη εικόνα για να ολοκληρωθεί ένας κύκλος.animation-timing-function: καθορίζει προκαθορισμένες καμπύλες επιτάχυνσης όπωςeaseήlinear.animation-delay: ο χρόνος μεταξύ του στοιχείου που φορτώνεται και της έναρξης της ακολουθίας κινούμενων σχεδίων (δροσερά παραδείγματα).animation-direction: ορίζει την κατεύθυνση της κινούμενης εικόνας μετά τον κύκλο. Η προεπιλογή του επαναφέρεται σε κάθε κύκλο.animation-iteration-count: ο αριθμός των φορών που πρέπει να εκτελεστεί η κινούμενη εικόνα.animation-fill-mode: ορίζει ποιες τιμές εφαρμόζονται πριν / μετά την κινούμενη εικόνα.
Για παράδειγμα, μπορείτε να ορίσετε την τελευταία κατάσταση της κινούμενης εικόνας για να παραμείνει στην οθόνη ή μπορείτε να την ρυθμίσετε ώστε να επιστρέφει στο παρελθόν όταν ξεκίνησε η κινούμενη εικόνα.animation-play-state: παύση / αναπαραγωγή της κινούμενης εικόνας.
Αυτές οι υπο-ιδιότητες μπορούν στη συνέχεια να χρησιμοποιηθούν ως εξής:
@keyframes stretch ( /* declare animation actions here */ ) .element ( animation-name: stretch; animation-duration: 1.5s; animation-timing-function: ease-out; animation-delay: 0s; animation-direction: alternate; animation-iteration-count: infinite; animation-fill-mode: none; animation-play-state: running; ) /* is the same as: */ .element ( animation: stretch 1.5s ease-out 0s alternate infinite none running; )Ακολουθεί μια πλήρης λίστα με τις τιμές που μπορεί να λάβει κάθε μία από αυτές τις δευτερεύουσες ιδιότητες:
animation-timing-function | ευκολία, ευκολία, ευκολία, ευθεία, γραμμική, κυβικά-bezier (x1, y1, x2, y2) (π.χ. κυβικά-bezier (0,5, 0,2, 0,3, 1,0)) |
animation-duration | Xs ή Xms |
animation-delay | Xs ή Xms |
animation-iteration-count | Χ |
animation-fill-mode | προς τα εμπρός, προς τα πίσω, και τα δύο, κανένα |
animation-direction | κανονικό, εναλλακτικό |
animation-play-state | σε παύση, τρέξιμο, τρέξιμο |
Πολλαπλά βήματα
Εάν ένα κινούμενο σχέδιο έχει τις ίδιες ιδιότητες έναρξης και λήξης, είναι χρήσιμο να διαχωρίζετε με κόμμα τις τιμές 0% και 100% εντός @keyframes:
@keyframes pulse ( 0%, 100% ( background-color: yellow; ) 50% ( background-color: red; ) )Πολλαπλές κινούμενες εικόνες
Μπορείτε να διαχωρίσετε με κόμμα τις τιμές για να δηλώσετε πολλά κινούμενα σχέδια σε έναν επιλογέα επίσης. Στο παρακάτω παράδειγμα, θέλουμε να αλλάξουμε το χρώμα του κύκλου με @keyframeταυτόχρονη ώθηση από πλευρά σε πλευρά με άλλο.
.element ( animation: pulse 3s ease infinite alternate, nudge 5s linear infinite alternate; )Εκτέλεση
Η κινούμενη εικόνα των περισσότερων ιδιοτήτων αποτελεί πρόβλημα απόδοσης, οπότε πρέπει να προχωρήσουμε με προσοχή πριν κινούμε οποιαδήποτε ιδιοκτησία. Ωστόσο, υπάρχουν ορισμένοι συνδυασμοί που μπορούν να κινούνται με ασφάλεια:
transform: translate()transform: scale()transform: rotate()opacity
Ποιες ιδιότητες μπορούν να κινούνται;
Το MDN διαθέτει μια λίστα με ιδιότητες CSS που μπορούν να κινούνται. Οι ιδιώτες ιδιότητες τείνουν στα χρώματα και τους αριθμούς. Ένα παράδειγμα μιας μη κινούμενης ιδιότητας είναι background-image.
Υποστήριξη προγράμματος περιήγησης
Αυτά τα δεδομένα υποστήριξης του προγράμματος περιήγησης προέρχονται από την Caniuse, η οποία έχει περισσότερες λεπτομέρειες. Ένας αριθμός υποδεικνύει ότι το πρόγραμμα περιήγησης υποστηρίζει τη λειτουργία σε αυτήν την έκδοση και νεότερη.
Επιφάνεια εργασίας
| Χρώμιο | Firefox | ΙΕ | Ακρη | Σαφάρι |
|---|---|---|---|---|
| 4 * | 5 * | 10 | 12 | 5.1 * |
Κινητό / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4 * | 6.0-6.1 * |
Περισσότερες πληροφορίες
- κινούμενα σχέδια στο MDN
- Χρησιμοποιώντας κινούμενες εικόνες CSS
- κινούμενα σχέδια στο W3C
- Jank busting για καλύτερη απόδοση απόδοσης
- Web animation στην εργασία
- Πέντε τρόποι κίνησης με υπευθυνότητα
- Κατάσταση άλματος, αρνητικές καθυστερήσεις, κινούμενη προέλευση και άλλα
- Ξεκινώντας κινούμενες εικόνες CSS στη μέση
- Κινούμενα σχέδια υψηλής απόδοσης