Το CSS είναι ένας από τους πιο ισχυρούς τρόπους για να γίνει η ιστοσελίδα διαδραστική. Μεταμορφώνει την εμφάνιση και την αίσθηση των βασικών μας ιστοσελίδα. Ένα από τα σημαντικά και συναρπαστικά χαρακτηριστικά που προσφέρει το CSS είναι ότι μας επιτρέπει να κάνουμε κινούμενες εικόνες. Μας επιτρέπει να μετακινήσουμε τα στοιχεία στη σελίδα μας. Ας ξεκινήσουμε το Journey of Animations σε CSS με την ακόλουθη σειρά:
Κινούμενα σχέδια σε CSS
Η προσθήκη κινούμενων σχεδίων στον ιστότοπό μας είναι ένας πολύ καλός τρόπος για να τραβήξετε την προσοχή των χρηστών. Δεν προσθέτει μόνο αξία στη σελίδα μας αλλά και εμπλουτίζει την εμπειρία των χρηστών. Το κινούμενο σχέδιο στο CSS βασίζεται σε δύο μέρη. Αυτοί είναι
- Βασικά καρέ
- Κινουμένων σχεδίων
Τα κινούμενα σχέδια CSS υποστηρίζονται σε όλα τα προγράμματα περιήγησης. Ωστόσο, ορισμένα παλαιότερα προγράμματα περιήγησης όπως το Safari (έως την έκδοση 8.0) απαιτεί πρόθεμα (-webkit-) για την ερμηνεία των ιδιοτήτων κινούμενης εικόνας. Για παράδειγμα:
.anim {ύψος: 200 εικονοστοιχεία πλάτος: φόντου 200 εικονοστοιχείων: φωτεινή θέση μπλε: σχετική ακτίνα περιγράμματος: 100% -webkit-animation-name: cssanim / * παλιά προγράμματα περιήγησης * / -webkit-animation-διάρκεια: 5s / * παλιά προγράμματα περιήγησης * / κινούμενα σχέδια -name: cssanim animation-διάρκειας: 5s} / * παλιά προγράμματα περιήγησης * / @ -webkit-keyframes cssanim {0% {left: 0px} 100% {left: 300px}} @keyframes cssanim {0% {αριστερά: 0px} 100 % {αριστερά: 300px}}Μπορούμε να χρησιμοποιήσουμε το δείγμα σελίδας html από πάνω και να αντικαταστήσουμε τον κώδικα CSS στην ετικέτα στυλ για να δοκιμάσουμε περαιτέρω παραδείγματα.
Κλειδιά καρέ σε CSS
Αυτό είναι το δομικό στοιχείο των κινούμενων σχεδίων στο CSS. Συνήθιζε να καθορίζει συγκεκριμένες στιγμές και στυλ της κινούμενης εικόνας στην ιστοσελίδα μας. Με άλλα λόγια, όταν καθορίζουμε τα @keyframes μέσα στο CSS μας, έχει τον έλεγχο να τροποποιήσει την τρέχουσα κατάσταση σε μια νέα κατάσταση ή να κινήσει τα αντικείμενα για μια συγκεκριμένη διάρκεια.
Τα @keyframes πρέπει να έχουν συγκεκριμένες ιδιότητες για τον έλεγχο της κινούμενης εικόνας, όπως το όνομα της κινούμενης εικόνας, τα στάδια και τις ιδιότητες.
Ονομα - Απαιτείται ένα όνομα για κάθε κινούμενο σχέδιο για να περιγράψει τις συμπεριφορές του.
Στάδια - Το στάδιο αντιπροσωπεύει την ολοκλήρωση μιας κινούμενης εικόνας. Μπορεί να γίνει με τη λέξη-κλειδί «προς» και «από» λέξη-κλειδί ή ως ποσοστό, ενώ το 0% αντιπροσωπεύει την αρχική κατάσταση και το 100% αντιπροσωπεύει την τελική κατάσταση μιας κινούμενης εικόνας. Το πλεονέκτημα της χρήσης της ποσοστιαίας αναπαράστασης είναι ότι μπορούμε να ορίσουμε πολλά ενδιάμεσα στάδια στο μεταξύ, δηλαδή ποια θα πρέπει να είναι η συμπεριφορά της κινούμενης εικόνας στο στάδιο 50% ή στο 75% κ.λπ.
Ιδιότητες - Αυτές οι ιδιότητες μας δίνουν έλεγχο στα @keyframes για χειρισμό τους κατά τη διάρκεια της κινούμενης εικόνας.
.anim {ύψος: 200 εικονοστοιχεία πλάτος: φόντου 200 εικονοστοιχείων: θέση φωτός μπλε: σχετική ακτίνα περιγράμματος: 100% όνομα-κινούμενη εικόνα: cssanim animation-διάρκεια: 5s} @keyframes cssanim {0% {transform: scale (0.5) αδιαφάνεια: 0} 50 % {transform: scale (1.5) αδιαφάνεια: 1} 100% {transform: scale (1)}}Τώρα, καθώς είμαστε ξεκάθαροι για τον ορισμό των βασικών καρέ. Ας εξερευνήσουμε τις ιδιότητες κινούμενης εικόνας, για να περιγράψουμε πώς να κινούμαστε τα στοιχεία και τα αντικείμενα μας. Οι δύο ιδιότητες, δηλαδή η κληρονομιά και η αρχική μπορούν να χρησιμοποιηθούν με όλους τους τύπους κινούμενων σχεδίων. Αυτές οι ιδιότητες χρησιμοποιούνται γενικά μαζί με την ετικέτα div για να παρουσιάσουν διαφορετικές συμπεριφορές.
αρχικός: Ορίζει αυτήν την ιδιότητα στην προεπιλεγμένη τιμή της.
κληρονομώ: Κληρονομεί αυτήν την ιδιότητα από το μητρικό της στοιχείο.
Ιδιότητες κινουμένων σχεδίων
- όνομα-κινούμενη εικόνα
Καθορίζει το όνομα του animation, το οποίο χρησιμοποιείται στο @keyframes για χειρισμό.Οι πιθανές τιμές είναι:
- όνομα: Αυτό καθορίζει το όνομα για σύνδεση στο βασικό πλαίσιο για κινούμενα σχέδια.
- κανένας: Αυτή είναι η προεπιλεγμένη τιμή και μπορεί να χρησιμοποιηθεί για την παράκαμψη των κληρονομικών ή διαδοχικών κινούμενων εικόνων.
Σύνταξη:
animation-name: όνομα | κανένα | αρχικό | κληρονομώ
.anim {ύψος: 200 εικονοστοιχεία πλάτος: φόντου 200 εικονοστοιχείων: φως μπλε θέση: σχετική ακτίνα περιγράμματος: 100% όνομα-κινούμενη εικόνα: cssanim animation-διάρκεια: 5s} @keyframes cssanim {0% {αριστερά: 0px} 100% {αριστερά: 300px} }- διάρκεια ζωής
Καθορίζει τον χρόνο που χρειάζεται για να ολοκληρώσει μια κινούμενη εικόνα μία εκτέλεση. Ορίζεται σε δευτερόλεπτα ή χιλιοστά του δευτερολέπτου (π.χ. 4s ή 400ms). Η προεπιλεγμένη τιμή αυτής της ιδιότητας είναι 0 δευτερόλεπτα, οπότε εάν αυτή η ιδιότητα δεν προσδιορίζεται, τότε η κινούμενη εικόνα δεν θα πραγματοποιηθεί.
Σύνταξη:
διάρκεια ζωής: χρόνος
.anim {ύψος: 200 εικονοστοιχεία πλάτος: φόντο 200 εικονοστοιχείων: μπλε θέση: σχετική ακτίνα περιγράμματος: 100% όνομα-κινούμενη εικόνα: cssanim animation-διάρκεια: 4s} @keyframes cssanim {0% {transform: scale (0.4) αδιαφάνεια: 0} 50 % {transform: scale (1.4) αδιαφάνεια: 1} 100% {transform: scale (1)}}- καθυστέρηση κίνησης
Η ιδιότητα animation-delay μας επιτρέπει να καθορίσουμε την καθυστέρηση στην κίνηση. Καθορίζει πότε θα ξεκινήσει η εκτέλεση μιας ακολουθίας κινούμενων σχεδίων.
Η τιμή αυτής της ιδιότητας μπορεί να δηλωθεί σε δευτερόλεπτα ή χιλιοστά του δευτερολέπτου (ms). Μπορεί να διατηρήσει τόσο θετικές όσο και αρνητικές τιμές. Μια θετική τιμή δείχνει ότι το κινούμενο σχέδιο θα ξεκινήσει αφού περάσει ο καθορισμένος χρόνος και μέχρι τότε θα παραμείνει ομόφωνη. Από την άλλη πλευρά, μια αρνητική τιμή θα ξεκινήσει αμέσως την κίνηση από το σημείο σαν να έχει ήδη εκτελεστεί για ένα καθορισμένο χρονικό πλαίσιο.
Σύνταξη:
animation-delay: χρόνος
.anim {ύψος: 200 εικονοστοιχεία πλάτος: φόντου 200 εικονοστοιχείων: θέση μπλε φωτός: σχετική ακτίνα περιγράμματος: 100% όνομα-animation: cssanim animation-διάρκεια: 4s animation-delay: 4s} @keyframes cssanim {0% {αριστερά: 0px} 100% {αριστερά: 250 εικονοστοιχεία}}- animation-iteration-count
Αυτή η ιδιότητα υποδεικνύει πόσες φορές πρέπει να αναπαραχθεί μια ακολουθία κινούμενων σχεδίων. Η προεπιλεγμένη τιμή αυτής της ιδιότητας είναι 1.Οι πιθανές τιμές είναι:
- αριθμός - δηλώνει τον αριθμό των επαναλήψεων
- άπειρος - υποδεικνύει ότι το κινούμενο σχέδιο πρέπει να επαναληφθεί για πάντα
Σύνταξη:
animation-iteration-count: αριθμός | άπειρος
.anim {ύψος: 200 εικονοστοιχεία πλάτος: φόντου 200 εικονοστοιχείων: θέση μπλε φως: σχετική ακτίνα περιγράμματος: 100% όνομα-κινούμενη εικόνα: cssanim animation-διάρκεια: 2s animation-iteration-count: 4} @keyframes cssanim {0% {αριστερά: 0px} 100% {αριστερά: 100 εικονοστοιχεία}}- κίνηση-κατεύθυνση
Καθορίζει την κατεύθυνση της κίνησης. Η κατεύθυνση του στοιχείου μπορεί να ρυθμιστεί ώστε να παίζει προς τα εμπρός, προς τα πίσω ή σε εναλλακτικούς κύκλους.Η προεπιλεγμένη τιμή αυτής της ιδιότητας είναι φυσιολογική και γίνεται επαναφορά σε κάθε κύκλο.Οι πιθανές τιμές είναι:
κανονικός - Αυτή είναι η προεπιλεγμένη συμπεριφορά και η κίνηση κινείται προς τα εμπρός. Μετά από κάθε κύκλο, το κινούμενο σχέδιο φτάνει στην αρχική του κατάσταση και αναπαράγεται ξανά
ΑΝΤΙΣΤΡΟΦΗ - Το κινούμενο σχέδιο αναπαράγεται προς τα πίσω. Μετά από κάθε κύκλο, το κινούμενο σχέδιο φτάνει στην τελική του κατάσταση και αναπαράγεται προς τα πίσω
εναλλακτικό - Η κατεύθυνση της κινούμενης εικόνας αντιστρέφεται, δηλαδή παίζει μπροστά και έπειτα προς τα πίσω σε κάθε κύκλο. Κάθε περίεργος κύκλος δίνει κίνηση προς τα εμπρός και κάθε ζυγό κύκλο δίνει κίνηση προς τα πίσω.
εναλλακτική-αντίστροφη - Η κατεύθυνση της κίνησης αντιστρέφεται εναλλάξ. Εδώ το κινούμενο σχέδιο αναπαράγεται πρώτα και μετά προς τα εμπρός σε κάθε κύκλο. Κάθε περίεργος κύκλος κινείται προς τα πίσω ή προς τα πίσω και κάθε ζυγός κύκλος δίνει κίνηση προς τα εμπρός.
Σύνταξη:
κατεύθυνση κίνησης: κανονική | αντίστροφη |εναλλακτικό | εναλλακτική-αντίστροφη
.anim {ύψος: 200 εικονοστοιχεία πλάτος: 200 εικονοστοιχεία φόντο: θέση μπλε φως: σχετική ακτίνα περιγράμματος: 100% όνομα-κινούμενη εικόνα: cssanim animation-διάρκεια: 2s animation-iteration-count: infinite} @keyframes cssanim {0% {left: 0px} 100% {αριστερά: 100 εικονοστοιχεία}}- λειτουργία animation-timing
Αυτή η ιδιότητα καθορίζει την καμπύλη ταχύτητας ή το στυλ κίνησης της κίνησης. Έχει ανατεθεί να κάνει την αλλαγή στο στυλ κινούμενης εικόνας ομαλά από τη μία φόρμα στην άλλη. Εάν δεν έχει αντιστοιχιστεί τιμή, είναι προεπιλεγμένη η διευκόλυνση.Οι πιθανές τιμές για τη λειτουργία animation-timing είναι:
ευκολία - Αυτή είναι η προεπιλεγμένη τιμή της ιδιότητας. Εδώ η κίνηση κινείται αργά, σταδιακά γίνεται γρήγορα στη μέση και στη συνέχεια καταλήγει ξανά αργά.
γραμμικός - Το κινούμενο σχέδιο διατηρεί την ίδια ταχύτητα καθ 'όλη τη διάρκεια του κύκλου, δηλαδή από την αρχή έως το τέλος.
ευκολία - Η κίνηση ξεκινά αργά.
ευκολία - Το κινούμενο σχέδιο τελειώνει αργά.
ευκολία-έξω - Η κίνηση κινείται αργά τόσο κατά την έναρξη όσο και κατά το τέλος.
κυβικά-bezier (n, n, n, n) - Αυτή η προηγμένη δυνατότητα μας επιτρέπει να δημιουργήσουμε μια προσαρμοσμένη συνάρτηση χρονισμού καθορίζοντας τις δικές μας τιμές. Η πιθανή τιμή κυμαίνεται από 0 έως 1.
Σύνταξη:
λειτουργία animation-timing: γραμμική | ευκολία | ευκολία | ευκολία | ευκολία στην έξοδο |κυβικά-bezier (n, n, n, n)
.anim {ύψος: 200 εικονοστοιχεία πλάτος: φόντου 200 εικονοστοιχείων: θέση μπλε φωτός: σχετική ακτίνα περιγράμματος: 100% όνομα-animation: cssanim animation-durion: 2s animation-direction: reverse} @keyframes cssanim {0% {φόντο: πορτοκαλί αριστερά: 0px } 50% {φόντο: κίτρινο αριστερά: 200 εικονοστοιχεία κορυφή: 200 εικονοστοιχεία} 100% {φόντο: μπλε αριστερά: 100 εικονοστοιχεία}}- λειτουργία γεμίσματος γεμίσματος
Αυτή είναι μια ειδική ιδιότητα καθώς καθορίζει το στυλ κινούμενης εικόνας πριν ή μετά την αναπαραγωγή της κινούμενης εικόνας.Ως προεπιλογή, το στυλ του στοιχείου δεν επηρεάζεται από την κινούμενη εικόνα πριν από την αρχή ή μετά τη λήξη της. Αυτή η ιδιότητα είναι χρήσιμη καθώς βοηθά στην παράκαμψη αυτής της προεπιλεγμένης συμπεριφοράς της κινούμενης εικόνας.Οι ακόλουθες είναι πιθανές τιμές για την ιδιότητα λειτουργίας animation-fill-mode:
κανένας - Αυτή είναι η προεπιλεγμένη τιμή της ιδιότητας, δηλαδή τα στυλ κινούμενων σχεδίων δεν εφαρμόζονται στο στοιχείο, πριν ή μετά την κινούμενη εικόνα.
εμπρός - Τα στυλ διατηρούνται από το στοιχείο στην τελική ακολουθία κινούμενων σχεδίων, δηλαδή μετά την ολοκλήρωση της κινούμενης εικόνας.
προς τα πίσω - Τα στυλ διατηρούνται από το στοιχείο στην αρχική ακολουθία κινούμενων σχεδίων, δηλαδή πριν το κινούμενο σχέδιο κοιτάξει επίμονα ιδιαίτερα κατά τη διάρκεια της καθυστέρησης κινούμενης εικόνας.
ποια είναι η διαφορά μεταξύ git και github
και τα δυο - Αυτό σημαίνει ότι το κινούμενο σχέδιο θα ακολουθήσει προς την κατεύθυνση, δηλαδή προς τα εμπρός και προς τα πίσω
Σύνταξη:
animation-fill-mode: κανένας | προς τα εμπρός | προς τα πίσω | και τα δυο
.anim {πλάτος: ύψος 50 εικονοστοιχείων: φόντο 50 εικονοστοιχείων: ελαφρύ μπλε χρώμα: λευκό γραμματοσειρά-βάρος: έντονη θέση: σχετικό κινούμενο σχέδιο-όνομα: cssanim animation-διάρκεια: 5s animation-iteration-count: infinite border-radius: 100%} # anim1 { animation-timing-function: easy} # anim2 {animation-timing-function: linear} # anim3 {animation-timing-function: easy-in} # anim4 {animation-timing-function: easy-out} # anim5 {animation- timing-function: easy-in-out} @keyframes cssanim {από {αριστερά: 0px} έως {αριστερά: 400px}}- animation-play-state
Αυτή η ιδιότητα καθορίζει μια κίνηση σε κατάσταση αναπαραγωγής ή σε παύση. Επίσης, όταν ένα κινούμενο σχέδιο συνεχίζεται από παύση ξεκινά από το σημείο που έφυγε.Οι πιθανές τιμές είναι:
- παιχνίδι - Για να καταστήσετε την κίνηση σε λειτουργία
- σε παύση - Για να καταστήσετε την κίνηση σε κατάσταση παύσης.
Σύνταξη:
animation-play-state: σε παύση | παιχνίδι
.anim {πλάτος: 100px ύψος: 100px φόντο: lightblue θέση: σχετικό animation-name: cssanim animation-durion: 3s animation-delay: 2s animation-fill-mode: backwards border-radius: 100%} @keyframes cssanim {0% {top: 0px background-color: orange} 50% {top: 0px background-color: green} 100% {top: 100pxbackground-color: blue}}- κινουμένων σχεδίων
Αυτό είναι γνωστό ως ιδιοκτησία στενογραφίας animation. Χρησιμοποιείται για καθαρότερο κώδικα. Μόλις εξοικειωθούμε με όλες τις ιδιότητες κινούμενης εικόνας, συνιστάται να χρησιμοποιούμε τη στενή κινούμενη εικόνα για την ταχύτερη κωδικοποίηση και τον ορισμό όλων των ιδιοτήτων σε μία γραμμή.
Σύνταξη:
animation: [animation-name] | [διάρκεια animation] | [animation-timing-function] |[animation-delay] | [animation-iteration-count] | [animation-direction] |[animation-fill-mode] | [animation-play-state]
Όλα τα εφέ κινούμενης εικόνας που δείχνουμε παραπάνω χρησιμοποιώντας διαφορετικές ιδιότητες κινούμενης εικόνας μπορούν να επιτευχθούν χρησιμοποιώντας το στενόκινουμένων σχεδίων ιδιοκτησία.
.anim {ύψος: 200 εικονοστοιχεία πλάτος: φόντο 200 εικονοστοιχείων: θέση μπλε φως: σχετική ακτίνα περιγράμματος: 100% όνομα-animation: cssanim animation-διάρκεια: 2s animation-direction: normal animation-play-state: paused} @keyframes cssanim {0% {φόντο: πορτοκαλί κορυφή: 0 εικονοστοιχεία} 50% {φόντο: κίτρινο αριστερά: 200 εικονοστοιχεία κορυφή: 200 εικονοστοιχεία} 100% {φόντο: μπλε αριστερά: 100 εικονοστοιχεία}}Αυτό ολοκληρώνει όλες τις ιδιότητες κινούμενης εικόνας που μπορούν να χρησιμοποιηθούν στο CSS. Πρέπει να δοκιμάσουμε διαφορετικές παραλλαγές αυτών των ιδιοτήτων για να έχουμε μια πιο σαφή εικόνα. Όταν αισθανόμαστε άνετα, η ιδιοκτησία στενογραφίας κινουμένων σχεδίων μπορεί να είναι πολύ χρήσιμη για τη σύνταξη καθαρότερου και ταχύτερου κώδικα. Αυτή είναι μια από τις σημαντικές δεξιότητες που πρέπει να μάθετε στο CSS για προγραμματιστές ιστοσελίδων. Δεδομένου ότι τείνουμε να εστιάζουμε περισσότερο στην κίνηση αντικειμένων παρά στατικών, οι κινούμενες εικόνες μπορούν να μας βοηθήσουν να το επιτύχουμε και επίσης να αναπτύξουμε υπέροχες ιστοσελίδες.
Ρίξτε μια ματιά στο δικό μας που έρχεται με ζωντανή εκπαίδευση με καθοδήγηση εκπαιδευτή και πραγματική εμπειρία έργου. Αυτή η εκπαίδευση σας κάνει ικανό σε δεξιότητες για να εργαστείτε με τεχνολογίες ιστού back-end και front-end. Περιλαμβάνει εκπαίδευση σε Web Development, jQuery, Angular, NodeJS, ExpressJS και MongoDB.
Έχετε μια ερώτηση για εμάς; Παρακαλώ αναφέρετέ το στην ενότητα σχολίων του blog 'Animations in CSS' και θα επικοινωνήσουμε μαζί σας.