Όσο πιο κοντά πλησιάζουμε στο να αρχίσει να λειτουργεί η διεπαφή, τόσο πιο κατανοητό γίνεται για τον χρήστη. Στη ζωή, σχεδόν τίποτα δεν συμβαίνει αμέσως - όταν ανοίγουμε ένα κουτάκι αναψυκτικού ή κλείνουμε τα μάτια μας πριν πάμε για ύπνο, παρατηρούμε ένα σωρό ενδιάμεσες καταστάσεις και όχι ένα απότομο «ανοιχτό/κλειστό», όπως συμβαίνει στον Ιστό.

Στο άρθρο μου θα μοιραστώ τις γνώσεις μου σχετικά με τα κινούμενα σχέδια CSS και πώς να εργαστώ με αυτό. Το animation δίνει στους ιστότοπους δυναμισμό και βελτιώνει την κατανόηση των δυνατοτήτων τους. Δίνει ζωή στις ιστοσελίδες και βοηθά στην αλληλεπίδραση των χρηστών. Σε αντίθεση με τις μεταβάσεις CSS3, τα κινούμενα σχέδια CSS βασίζονται σε βασικά καρέ. Τα οποία σας επιτρέπουν να αναπαράγετε και να επαναλαμβάνετε εφέ για καθορισμένο χρόνο, καθώς και να διακόπτετε αυτόματα την κινούμενη εικόνα εντός του βρόχου.

Ένα κινούμενο σχέδιο είναι ένα σύνολο βασικών καρέ ή βασικών καρέ αποθηκευμένων σε CSS:

@keyframes animation-test ( 0% ( πλάτος: 100px; ) 100% (πλάτος: 200px; ) )

Ας δούμε τι συμβαίνει εδώ. Η λέξη-κλειδί @keyframes υποδηλώνει την ίδια την κινούμενη εικόνα. Έπειτα έρχεται το όνομα του animation, στην περίπτωσή μας animation-test. Τα σγουρά σιδεράκια περιέχουν μια λίστα βασικών καρέ. Χρησιμοποιούμε ένα αρχικό πλαίσιο 0% και ένα πλαίσιο λήξης 100% (μπορούν επίσης να γραφτούν ως από και προς).
Ρίξτε μια ματιά στον παρακάτω κώδικα. Το animation μπορεί επίσης να ρυθμιστεί ως εξής:

@keyframes animation-test ( από ( πλάτος: 0; ) 25% ( πλάτος: 75 εικονοστοιχεία; ) 75% (πλάτος: 150 εικονοστοιχεία; ) έως ( πλάτος: 100%; ) )

Θυμηθείτε, εάν δεν έχει καθοριστεί ένα πλαίσιο έναρξης ή λήξης, το πρόγραμμα περιήγησης θα τα εντοπίσει αυτόματα σαν να μην είχε εφαρμοστεί κινούμενη εικόνα σε αυτά.

Μπορείτε να συνδέσετε κινούμενα σχέδια σε ένα στοιχείο όπως αυτό:

Στοιχείο-επιλογέας ( animation-name: your-animation-name; animation-duration: 2,5s; )

Η ιδιότητα animation-name καθορίζει το όνομα για την κινούμενη εικόνα @keyframes. Ο κανόνας animation-duration καθορίζει τη διάρκεια της κίνησης σε δευτερόλεπτα (1s, 30s, 0,5s) ή χιλιοστά του δευτερολέπτου (600ms, 2500ms).

Μπορείτε επίσης να ομαδοποιήσετε βασικά καρέ:

@keyframes animation-test ( 0%, 35% ( πλάτος: 50px; ) 75% (πλάτος: 200px; ) 100% (πλάτος: 100%; ) )

Μπορείτε να εφαρμόσετε πολλά κινούμενα σχέδια σε ένα στοιχείο (επιλογέας). Τα ονόματα και οι παράμετροί τους θα πρέπει να γράφονται με τη σειρά εφαρμογής:

Element-selector ( animation-name: anim-name-1, anim-name-2; animation-duration: 1s, 3s; )

Καθυστέρηση κινουμένων σχεδίων:

Η ιδιότητα animation-delay καθορίζει την καθυστέρηση πριν από την αναπαραγωγή της κινούμενης εικόνας, σε δευτερόλεπτα ή χιλιοστά του δευτερολέπτου:

Element-selector ( animation-name: anim-name-1; animation-duration: 3s; animation-delay: 2s; /* Θα περάσουν 2 δευτερόλεπτα πριν ξεκινήσει η κινούμενη εικόνα */ )

Επανάληψη κινουμένων σχεδίων:

Χρησιμοποιώντας animation-itation-count μπορούμε να καθορίσουμε πόσες φορές θα επαναληφθεί το animation: 0, 1, 2, 3, κ.λπ. Ή άπειρο για επαναφορά:

Στοιχείο-επιλογέας ( animation-name: anim-name-1; animation-duration: 3s; animation-delay: 4s; animation-repeation-count: 5; /* animation αναπαράγεται 5 φορές */ )

Κατάσταση στοιχείου πριν και μετά την κίνηση:

Χρησιμοποιώντας την ιδιότητα animation-fill-mode, μπορείτε να καθορίσετε σε ποια κατάσταση θα βρίσκεται το στοιχείο πριν από την έναρξη της κίνησης και μετά το τέλος της:

animation-fill-mode: προς τα εμπρός;- το στοιχείο κινούμενης εικόνας θα βρίσκεται στην τελευταία κατάσταση βασικού καρέ μετά την ολοκλήρωση/αναπαραγωγή.

ένα Nimation-fill-mode: προς τα πίσω.- το στοιχείο θα βρίσκεται στην κατάσταση του πρώτου βασικού καρέ.

animation-fill-mode: και τα δύο. - πριν ξεκινήσει η κινούμενη εικόνα, το στοιχείο θα βρίσκεται στην κατάσταση του πρώτου καρέ κλειδιού, μετά την ολοκλήρωση - στην κατάσταση του τελευταίου.

Έναρξη και διακοπή κινούμενης εικόνας:

Αυτή είναι η ευθύνη της ιδιότητας animation-play-state, η οποία μπορεί να λάβει δύο τιμές: εκτέλεση ή παύση.

Element-selector:hover ( animation-play-state: σε παύση; )

Σκηνοθεσία κινουμένων σχεδίων:

Η ιδιότητα animation-direction καθορίζει τον τρόπο ελέγχου της κατεύθυνσης στην οποία αναπαράγεται το animation. Εδώ είναι οι πιθανές τιμές:

animation-σκηνοθεσία: normal; - το κινούμενο σχέδιο παίζεται με άμεση σειρά.

animation-direction: reverse; - το κινούμενο σχέδιο παίζεται με αντίστροφη σειρά, από προς σε από.

animation-σκηνοθεσία: εναλλακτική;- οι άρτιες επαναλήψεις κινουμένων σχεδίων παίζονται με αντίστροφη σειρά, οι μονές - με τη σειρά προς τα εμπρός.

animation-σκηνοθεσία: εναλλακτική-αντίστροφη; - Οι μονές επαναλήψεις κινουμένων σχεδίων παίζονται με αντίστροφη σειρά, ζυγές - με τη σειρά προς τα εμπρός.

Λειτουργία ομαλής εξόδου κινούμενων καρέ:

Η ιδιότητα animation-timing-function σάς επιτρέπει να ορίσετε μια ειδική λειτουργία υπεύθυνη για την ταχύτητα αναπαραγωγής κινούμενων εικόνων. Από προεπιλογή, το κινούμενο σχέδιο ξεκινά αργά, επιταχύνεται γρήγορα και επιβραδύνεται στο τέλος. Αυτήν τη στιγμή έχουμε τις ακόλουθες προκαθορισμένες τιμές: γραμμικό, ευκολία, ευκολία-σε, ευκολία-έξω, ευκολία-σε-έξω, βήμα-έναρξη, βήμα-τέλος.

Ωστόσο, μπορείτε να δημιουργήσετε μόνοι σας τέτοιες λειτουργίες. Εννοια animation-timing-function: cubic-bezier (P1x, P1y, P2x, P2y); παίρνει 4 ορίσματα ως είσοδο και δημιουργεί μια καμπύλη διανομής για τη διαδικασία κινούμενης εικόνας.

Μπορείτε να μελετήσετε λεπτομερέστερα ή να δοκιμάσετε τη δημιουργία αυτών των λειτουργιών στον ιστότοπο http://cubic-bezier.com

Τέλος, το κινούμενο σχέδιο μπορεί να αναλυθεί σε ένα σύνολο μεμονωμένων τιμών (βημάτων) χρησιμοποιώντας τη συνάρτηση βημάτων, η οποία λαμβάνει ως είσοδο τον αριθμό των βημάτων και την κατεύθυνση (αρχή ή τέλος). Στο παρακάτω παράδειγμα, η κινούμενη εικόνα αποτελείται από 5 βήματα, το τελευταίο από τα οποία θα συμβεί ακριβώς πριν από το τέλος της κινούμενης εικόνας:

Στοιχείο-επιλογέας ( animation-name: anim-name-1; animation-duration: 3s; animation-delay: 5s; animation-iting-counting: 3; animation-timing-function: steps(5, end); )

Υποστήριξη προγράμματος περιήγησης για κινούμενα σχέδια:

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

Οι τιμές με -webkit-, -moz- ή -O- υποδεικνύουν την πρώτη έκδοση που λειτούργησε με το πρόθεμα.

Στον ιστότοπο https://www.w3schools.com Μπορείτε να μελετήσετε το κινούμενο σχέδιο CSS με περισσότερες λεπτομέρειες (με παραδείγματα).
Μία από τις δημοφιλείς βιβλιοθήκες για εργασία με κινούμενα σχέδια είναι animate.css.

Μπορεί να φαίνεται ότι οι δυσκολίες που αντιμετωπίζετε όταν εργάζεστε με κινούμενα σχέδια CSS δεν δικαιολογούνται. Αλλά αυτό δεν είναι απολύτως αλήθεια.

Πρώτον, το CSS είναι ένα ισχυρό εργαλείο για τη βελτίωση της εμπειρίας χρήστη μιας διεπαφής. Δεν επηρεάζει πολύ την παραγωγικότητα των χρηστών. Σε αντίθεση με τα ανάλογα JavaScript. Τεχνολογία, μέσω της χρήσης υπολογιστική ισχύςΗ GPU επιτρέπει στα προγράμματα περιήγησης να βελτιστοποιούν γρήγορα την ταχύτητα απόδοσης των στοιχείων.

Δεύτερον, η ευελιξία, η ταχύτητα και η ευκολία στην εφαρμογή κινούμενων εικόνων CSS θα βοηθήσουν να «αναπνεύσει ζωή» σε υπάρχουσες ή νέες διεπαφές. Έχοντας αναπτύξει γενικές και πρωτότυπες προσεγγίσεις και κατανοώντας τις ιδιαιτερότητες της τεχνολογίας, μπορείτε να δημιουργήσετε μοναδικές διεπαφές χρηστικότητας για σχεδόν όλα τα έργα.

Ελπίζω να το βρήκατε στο άρθρο ΧΡΗΣΙΜΕΣ ΠΛΗΡΟΦΟΡΙΕΣγια τον εαυτό μου. Όμορφα site σε όλους. Μην ξεχνάτε τα κινούμενα σχέδια :)

ΠΡΟΣΟΧΗ! Δεδομένου ότι σε αυτό το μάθημα θα αναλύσουμε τα κινούμενα σχέδια, δεν θα μπορέσω να σας δείξω ένα παράδειγμα της δουλειάς του σε εικόνες, οπότε μη διστάσετε να ανοίξετε τον επεξεργαστή κώδικα και να γράψετε τον κώδικα που δίνεται σε αυτό το άρθρο εκεί.

Βασικά στοιχεία δημιουργίας

Επομένως, πρώτα απ 'όλα, πρέπει να ξεκινήσετε με το πώς να το δημιουργήσετε. Πιθανότατα έχετε συνηθίσει στο γεγονός ότι οποιοδήποτε πράγμα στο CSS υλοποιείται εκχωρώντας τις απαραίτητες ιδιότητες με τις κατάλληλες τιμές στον επιθυμητό επιλογέα. Έτσι, όταν δημιουργείτε κινούμενα σχέδια, αυτό δεν αρκεί. Το διάγραμμα μοιάζει με αυτό:

Τα ίδια τα εφέ μετάβασης δημιουργούνται χρησιμοποιώντας @keyframes

Στο απαιτούμενο στοιχείο δίνεται αυτό το ίδιο κινούμενο σχέδιο, καθώς και οι παράμετροί του (όλα αυτά χρησιμοποιώντας ιδιότητες και τις τιμές τους).

Επομένως, πρώτα πρέπει να περιγράψουμε τις απαραίτητες αλλαγές στο @keyframes, ας ρίξουμε μια πιο προσεκτική ματιά στον τρόπο εργασίας με αυτές.

Σύνταξη @keyframes

Στην πραγματικότητα, θα είναι πιο εύκολο για μένα να σας εξηγήσω τα πάντα χρησιμοποιώντας ένα έτοιμο παράδειγμα, αν και πολύ απλό. Εδώ είναι (ο κώδικας προστίθεται στο αρχείο css):

Παλμός @keyframes( 0%(μέγεθος γραμματοσειράς: 50px;) 50%(μέγεθος γραμματοσειράς: 60px;)) 100%(μέγεθος γραμματοσειράς: 50px;))

παλμός @keyframes ( 0% (μέγεθος γραμματοσειράς: 50 px;) 50% (μέγεθος γραμματοσειράς: 60 px;))

Έτσι, μετά τη λέξη-κλειδί @keyframes υπάρχει μια αυθαίρετη λέξη που θα λειτουργεί ως όνομα του κινούμενου σχεδίου. Στην περίπτωσή μας είναι «παλμός». Στη συνέχεια, ανοίξτε σγουρά σιδεράκια στα οποία είναι γραμμένοι οι απαραίτητοι κανόνες.

Τα ποσοστά είναι οι λεγόμενες χρονικές σημάνσεις κατά τις οποίες οι καθορισμένες ιδιότητες θα προστεθούν στο στοιχείο. Στην περίπτωσή μας, αυτό που γράφεται σημαίνει το εξής: στην αρχή της εκτέλεσης, το μέγεθος της γραμματοσειράς θα είναι 50 pixel, στη μέση θα αυξηθεί στα 60 και στο τέλος θα μειωθεί ξανά στο αρχικό μέγεθος.

Οι λέξεις-κλειδιά από και προς μπορούν να αντικαταστήσουν την καταχώριση ποσοστού· υποδεικνύουν 0% και 100%, αντίστοιχα, δηλαδή την αρχή και το τέλος της αναπαραγωγής.

Βάζοντας το Animation σε Δράση

Προς το παρόν έχουμε απλώς κώδικα που δημιουργεί ένα εφέ κίνησης, αλλά δεν χρησιμοποιείται πουθενά. Αν ανανεώσετε την ιστοσελίδα σας, τίποτα δεν θα αλλάξει. Αντίστοιχα, για να εφαρμόσετε κινούμενα σχέδια, πρέπει να εκτελέσετε δύο βήματα:

Επιλέξτε το στοιχείο για το οποίο θα εφαρμοστεί

Συνδέστε το με τους κανόνες που περιγράφονται μέσω του @keyframes (μέσω του ονόματος) και επίσης ορίστε επιπρόσθετες ρυθμίσειςαν είναι απαραίτητο.

Ας δοκιμάσουμε

Στο αρχείο μου html, δημιούργησα ένα μπλοκ με την κλάση shadow, το οποίο περιέχει μια απλή γραμμή κειμένου. Στόχος μας είναι να εφαρμόσουμε τα εφέ κινούμενων σχεδίων που περιγράψαμε νωρίτερα σε αυτό στοιχείο κειμένου.

Υπάρχουν δύο απαιτούμενες ιδιότητες που πρέπει να καθοριστούν σε αυτήν την περίπτωση για να λειτουργήσουν όλα. Πρώτον, αυτό είναι το όνομα που γράψαμε στα βασικά καρέ. Δεύτερον, αυτή είναι η διάρκεια του κινούμενου σχεδίου, επειδή χωρίς αυτήν την παράμετρο το πρόγραμμα περιήγησης απλά δεν θα μπορεί να το παίξει.

Έτσι, εκτός από τα στυλ που έχει ήδη το μπλοκ μας, προσθέτουμε και νέα:

animation-name: pulse; animation-διάρκεια: 2s;

Έτσι, όλα θα επαναληφθούν 4 φορές και μετά θα σταματήσουν. Όπως καταλαβαίνετε, αντί για τέσσερα μπορείτε να εισάγετε οποιοδήποτε αριθμό.

Ατελείωτο animation σε css3

Εφαρμόζεται πολύ εύκολα χρησιμοποιώντας αυτήν την ίδια ιδιότητα. Στην πραγματικότητα, μπορείτε απλώς να ορίσετε τον αριθμό των επαναλήψεων σε μερικές χιλιάδες, αυτό θα είναι αρκετό, αλλά θεωρητικά το animation μας δεν θα επαναλαμβάνεται επ 'αόριστον.

animation-itation-count: infinite;

animation - iteration - count : infinite ;

Αυτό ήταν, τώρα κάναμε μια ατελείωτη επανάληψη. Δεν συνιστώ να ελέγξετε αν αυτό είναι αλήθεια αφού κάθεστε πίσω από μια οθόνη όλη σας τη ζωή. Αυτό χρησιμοποιείται απλώς σε περιπτώσεις που θέλετε το αποτέλεσμα να επαναλαμβάνεται συνεχώς και να μην εξαφανίζεται. Εάν δεν είναι ενοχλητικό και δεν αποσπά την προσοχή του χρήστη, τότε γιατί όχι.

Καθυστέρηση πριν από την έναρξη

Από προεπιλογή, η αναπαραγωγή ξεκινά μετά την πλήρη φόρτωση της σελίδας. Αυτή η συμπεριφορά μπορεί να ελεγχθεί χρησιμοποιώντας την ιδιότητα animation-delay. Η τιμή του καθορίζεται σε δευτερόλεπτα.

Κατεύθυνση

Μια άλλη ενδιαφέρουσα ιδιότητα είναι το animation-direction. Από προεπιλογή είναι ρυθμισμένο σε κανονικό, εάν το ρυθμίσετε σε αντίστροφη, τότε όλα τα περιγραφόμενα πλαίσια θα εκτελεστούν προς την αντίθετη κατεύθυνση. Ας δούμε ποια είναι η διαφορά. Για να γίνει αυτό, άλλαξα λίγο το εφέ προσθέτοντας ένα άλλο πλαίσιο.

Παλμός @keyframes( 0% (μέγεθος γραμματοσειράς: 50 εικονοστοιχεία;) 50% (μέγεθος γραμματοσειράς: 60 εικονοστοιχεία;) 70% (μέγεθος γραμματοσειράς: 80 εικονοστοιχεία;) 100% (μέγεθος γραμματοσειράς: 50 εικονοστοιχεία;))

παλμός @keyframes ( 0% (μέγεθος γραμματοσειράς: 50 px;) 50% (μέγεθος γραμματοσειράς: 60 px;) 70% (μέγεθος γραμματοσειράς: 80 px;) 100% (μέγεθος γραμματοσειράς: 50 px;))

Έτσι, με μια κανονική κατεύθυνση, στο πρώτο μισό της κινούμενης εικόνας το μέγεθος της γραμματοσειράς θα αυξηθεί στα 60 pixel, στη συνέχεια θα αυξηθεί απότομα και πάλι, έως τα 80, μετά την οποία θα επιστρέψει στην αρχική του θέση.

Ρύζι. 2. Μέγεθος αρχικού κειμένου

Ρύζι. 3. Το μέγεθος της γραμματοσειράς είναι σχεδόν στο τέλος του animation, πριν επιστρέψει απότομα στην αρχική του κατάσταση.

Τώρα ρωτάμε:

animation-direction: reverse;

animation-direction: reverse;

Όλα αναποδογύρισαν. Πρώτον, το κείμενο θα αυξηθεί έως και 30 pixel, έως και 80, και για το υπόλοιπο κινούμενο σχέδιο θα μειωθεί σταδιακά, επιστρέφοντας τελικά στο προηγούμενο μέγεθός του. Είναι απλό.

Φόρμα κινουμένων σχεδίων

Και αυτή είναι ίσως μια από τις πιο ενδιαφέρουσες ρυθμίσεις, με τις οποίες μπορείτε να πειραματιστείτε για μεγάλο χρονικό διάστημα. Από προεπιλογή, όλες οι αλλαγές εκτελούνται με την ίδια ταχύτητα. Αυτό το είδος κινουμένων σχεδίων ονομάζεται γραμμικό και υπάρχουν και άλλα εκτός από αυτό.

Χαιρετισμούς, φίλοι! Σήμερα θα εξετάσουμε ένα πολύ ενδιαφέρον θέμα - τη δημιουργία κινούμενων εικόνων CSS χρησιμοποιώντας ένα πραγματικό παράδειγμα. Το αποκορύφωμα αυτού του σεμιναρίου θα είναι η δημιουργία ενός όμορφου κινούμενου σχεδίου CSS με το λογότυπο του Million Dollar.

Δροσερός

Τραύλισμα

Υλικό μαθήματος

• Πηγές: Λήψη
• Βασικό παράδειγμα από το μάθημα: https://codepen.io/agragregra/pen/PKNavm
• Πρότυπο έναρξης από το μάθημα: https://github.com/agragregra/optimizedhtml-start-template

Λίγη θεωρία

Πριν ξεκινήσετε τη δημιουργία ενός κινούμενου παραδείγματος, θα πρέπει να εξετάσετε τα βασικά Κινούμενα σχέδια CSS, εξετάστε βασικούς όρους, ιδιότητες και κανόνες Δημιουργία CSSκινούμενα σχέδια.

Εάν είχατε ήδη εμπειρία στη δημιουργία κινούμενων εικόνων σε οποιεσδήποτε εφαρμογές, όπως το Adobe After Effects ή το παλιό Flash Professional (τώρα Adobe Animate), τότε θα πρέπει να είστε εξοικειωμένοι με έννοιες όπως "Keyframes", "Προσωρινές λειτουργίες ή δυναμική κίνησης", οι οποίες, όπως και σε κάθε άλλο τομέα της κίνησης, ισχύουν για την κίνηση στοιχείων σε μια σελίδα με χρήση CSS. Ωστόσο, σε αντίθεση με την εργασία με διεπαφές εφαρμογών, δημιουργείτε τα κινούμενα σχέδια CSS γράφοντας κώδικα σε ένα πρόγραμμα επεξεργασίας.

Κανόνας CSS @keyframes

Η δημιουργία μιας κινούμενης εικόνας CSS ξεκινά με τη δήλωση του ονόματος της κινούμενης εικόνας σε ένα μπλοκ @keyframesκαι ορίζοντας τα λεγόμενα βήματα κινούμενης εικόνας ή βασικά καρέ.

Για να αναθεωρήσουμε τη θεωρία και τα βασικά, θα χρησιμοποιήσουμε καθαρό CSS και αργότερα, χρησιμοποιώντας ένα πιο περίπλοκο παράδειγμα, θα χρησιμοποιήσουμε τον προεπεξεργαστή Sass. Μπορείτε να μάθετε περισσότερα για το Sass στο μάθημα. Επιπλέον, για μια βαθύτερη κατανόηση των βασικών στοιχείων του CSS, προτείνω επίσης να διαβάσετε τα μαθήματα "Βασικά στοιχεία CSS - Ένας οδηγός για μικρά παιδιά" και "Όλοι οι επιλογείς CSS σε ένα μάθημα"

Ας δούμε τη δομή @keyframes και την εργασία με βασικά καρέ απλό παράδειγμα:

περιστροφή @keyframes ( 0% ( border-radius: 0 0 0 0; transformation: rotate(0deg); ) 25% ( border-radius: 50% 0 0 0; transform: rotate(45deg); ) 50% ( border- ακτίνα: 50% 50% 0 0; μετασχηματισμός: περιστροφή (90 μοίρες); ) 75% (ακτίνα περιγράμματος: 50% 50% 50% 0; μετασχηματισμός: περιστροφή (135 μοίρες); ) 100% (ακτίνα περιγράμματος: 50% 50 % 50% 50%; μετασχηματισμός: περιστροφή (180 μοίρες); ) )

Στην πρώτη γραμμή βλέπουμε ότι μετά λέξη-κλειδίΤο @keyframes το όνομά του είναι "turning". Αυτό είναι το όνομα του μπλοκ πλαισίων, στο οποίο θα αναφερθούμε περαιτέρω.

Μετά τη δήλωση, ανοίγει ένα σγουρό στήριγμα (στο σε αυτό το παράδειγμαεπί καθαρό CSS), στο οποίο οι ιδιότητες γράφονται διαδοχικά από 0% έως 100% για κάθε πλαίσιο κλειδιού. Λάβετε υπόψη ότι μεταξύ 0% και 100% μπορείτε να εισαγάγετε όσες ενδιάμεσες τιμές θέλετε, είτε είναι 50%, 75% ή ακόμα και 83%. Αυτό μοιάζει πολύ με το χρονοδιάγραμμα μιας εφαρμογής κινούμενων εικόνων, όπου μπορείτε να προσθέσετε οποιαδήποτε ενδιάμεση κατάσταση μεταξύ δύο καταστάσεων.

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

Πρόσβαση σε ένα μπλοκ βασικών πλαισίων

Αφού έχουμε ορίσει βασικά πλαίσια για το αντικείμενο (στην πραγματική ζωή αυτό γίνεται παράλληλα ή ακόμα και μετά την πρόσβαση στο μπλοκ με βασικά πλαίσια), μπορούμε να έχουμε πρόσβαση στο μπλοκ που δημιουργήσαμε πρόσφατα. Ας δούμε τον παρακάτω απλό κώδικα από το παραπάνω παράδειγμα:

Div (πλάτος: 120 εικονοστοιχεία, ύψος: 120 εικονοστοιχεία, χρώμα φόντου: βιολετί, περιθώριο: 100 εικονοστοιχεία, κινούμενη εικόνα: περιστροφή 2 δευτ. 1 δευτερόλεπτο άπειρη εναλλακτική, )

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

Κινούμενα σχέδια: περιστροφή 2s ease-out 1s άπειρη εναλλακτική.

Εάν όλα είναι σχετικά ξεκάθαρα με τον ορισμό των βασικών πλαισίων, τότε αυτή η γραμμή χρειάζεται άμεση εξήγηση. Όπως βλέπουμε, η πρώτη έρχεται Ιδιότητα CSS"κινουμένων σχεδίων". Αυτή είναι μια συντομογραφία, όπως η ιδιότητα "margin: 20px 30px 40px 50px", η οποία μπορεί να χωριστεί σε πολλές ξεχωριστές ιδιότητες:

Με αυτήν την αναλογία, η σύνθετη ιδιότητα "animation" μπορεί να χωριστεί σε πολλές ξεχωριστές ιδιότητες:

animation-name	Το όνομα της κινούμενης εικόνας στην οποία έχετε πρόσβαση από το @keyframes
animation-διάρκεια	Διάρκεια ή πόσο διαρκεί η εκτέλεση της κινούμενης εικόνας CSS. Μπορεί να καθοριστεί σε δευτερόλεπτα (s) ή χιλιοστά του δευτερολέπτου (ms)
animation-timing-function	Χρονική συνάρτηση, δυναμική κίνησης αντικειμένων ή αλλαγές ιδιοτήτων ( ευκολία- (από προεπιλογή) το κινούμενο σχέδιο ξεκινά αργά, επιταχύνεται και τελειώνει αργά. γραμμικός- η κίνηση εμφανίζεται ομοιόμορφα. ευκολία- ξεκινά αργά και επιταχύνει προς το τελευταίο βασικό πλαίσιο. ευκολία- ξεκινά γρήγορα και επιβραδύνει ομαλά στο τέλος. ευκολία εισόδου- ξεκινά αργά και τελειώνει αργά)
animation-καθυστέρηση	Χρόνος καθυστέρησης κινουμένων σχεδίων ΠΡΙΝ την έναρξη. Καθορίζεται επίσης σε δευτερόλεπτα ή χιλιοστά του δευτερολέπτου
κινούμενη εικόνα-επανάληψη-μέτρηση	Αριθμός επαναλήψεων (επαναλήψεις) κινουμένων σχεδίων ( άπειρος- άπειρο, ή μπορείτε να καθορίσετε έναν απλό αριθμό χωρίς μονάδες)
animation-σκηνοθεσία	Σκηνοθεσία κινουμένων σχεδίων, διαδοχική, αντίστροφη ή εμπρός και πίσω ( κανονικός- (από προεπιλογή) το κινούμενο σχέδιο παίζει από την αρχή μέχρι το τέλος και σταματά. εναλλακτικό- παίζει από την αρχή μέχρι το τέλος και προς την αντίθετη κατεύθυνση. εναλλακτική-αντίστροφη- Παίζει από άκρη σε άκρη και πίσω. ΑΝΤΙΣΤΡΟΦΗ- το κινούμενο σχέδιο παίζεται από το τέλος.)
animation-play-state	Έλεγχος αναπαραγωγής κινούμενων εικόνων ( σε παύση(παύση), τρέξιμο(εκτόξευση) κ.λπ.). Μπορεί να εφαρμοστεί στο:hover ή από μια συνάρτηση JS εάν χρειάζεται
animation-fill-mode	Αναπαράγεται η κατάσταση του στοιχείου πριν και μετά το animation. Για παράδειγμα, η τιμή προς τα πίσωσας επιτρέπει να επαναφέρετε όλες τις ιδιότητες στην αρχική τους κατάσταση αμέσως μετά την εφαρμογή κινούμενων εικόνων

Τις περισσότερες φορές, οι έμπειροι προγραμματιστές δεν γράφουν όλες αυτές τις ιδιότητες ξεχωριστά, αλλά χρησιμοποιούν μια σύντομη σημείωση και η δομή της είναι η εξής:

animation: (1. animation-name - name) (2. animation-duration - duration) (3. animation-timing-function δυναμική κίνησης) (4. animation-delay - pause before start) (5. animation-interation- καταμέτρηση - αριθμός εκτελέσεων) (6. animation-σκηνοθεσία - σκηνοθεσία)

Κινούμενα σχέδια: animationname 2s γραμμική 1s άπειρη αντίστροφη

Από το παράδειγμα βλέπουμε ότι έχουμε πρόσβαση στο μπλοκ @keyframes animationname, ορίζουμε τη διάρκεια του animation σε 2 δευτερόλεπτα, η δυναμική είναι γραμμική, η παύση πριν από την έναρξη είναι 1 δευτερόλεπτο, το animation επαναλαμβάνεται ατελείωτα και εκτελείται προς την αντίθετη κατεύθυνση.

Όπως είπα νωρίτερα, η σύντομη σημειογραφία ξεκινά με την ιδιότητα " κινουμένων σχεδίων", ακολουθούμενες από τιμές, η σειρά των οποίων είναι καλύτερα να μην ξεχνάμε, ώστε να μην υπάρχει σύγχυση κατά τη σύνταξη κινούμενων εικόνων CSS.

Ωστόσο, οι περισσότερες από αυτές τις ιδιότητες μπορούν να παραλειφθούν, καθώς τις περισσότερες φορές οι προεπιλεγμένες τιμές τους θα ικανοποιούν πλήρως τις περισσότερες εργασίες δημιουργίας κινούμενων εικόνων. Ορισμένα από αυτά μπορεί να μην είναι γραμμένα, αλλά τα υπόλοιπα πρέπει να υποδεικνύονται με τη σειρά που συζητήσαμε νωρίτερα. Γενικά, για να λειτουργήσει η κινούμενη εικόνα σας, χρειάζεστε μόνο δύο παραμέτρους στη σύνθετη ιδιότητά σας - το όνομα ( animation-name) και διάρκεια ( animation-διάρκεια).

Η κινούμενη εικόνα CSS3 χρησιμοποιείται αρκετά ευρέως. Ήρθε η ώρα ακόμη και οι πιο αρχάριοι κατασκευαστές ιστότοπων να κατανοήσουν τι είναι το κινούμενο σχέδιο CSS και πώς να το δημιουργήσουν. Μπορεί να πιστεύετε ότι το κινούμενο σχέδιο CSS3 έχει να κάνει με την κίνηση των μπλοκ και μοιάζει με κινούμενα σχέδια. Αλλά το κινούμενο σχέδιο CSS δεν αφορά μόνο τη μετακίνηση ενός στοιχείου από το ένα σημείο στο άλλο, αλλά και την παραμόρφωση και άλλους μετασχηματισμούς. Για να γίνει αυτό ξεκάθαρο ακόμη και για αρχάριους, έγραψα τα πάντα βήμα προς βήμα.

1. Βασικές ιδιότητες του CSS3 animation

Ένα μικρό θεωρητικό μπλοκ από το οποίο θα καταλάβετε ποιες ιδιότητες CSS3 είναι υπεύθυνες για το animation, καθώς και ποιες τιμές μπορούν να λάβουν.

• animation-name— ένα μοναδικό όνομα για το κινούμενο σχέδιο (πλαίσια κλειδιά, θα μιλήσουμε για αυτά παρακάτω).
• animation-διάρκεια— διάρκεια κινουμένων σχεδίων σε δευτερόλεπτα.
• animation-timing-function— καμπύλη αλλαγής ταχύτητας κινουμένων σχεδίων. Με την πρώτη ματιά είναι πολύ ασαφές. Είναι πάντα πιο εύκολο να το δείξετε με ένα παράδειγμα και θα τα δείτε παρακάτω. Μπορεί να λάβει τις ακόλουθες τιμές: γραμμικό | ευκολία | ευκολία | ευκολία | cubic-bezier(n,n,n,n) .
• animation-καθυστέρηση— καθυστέρηση σε δευτερόλεπτα πριν από την έναρξη της κινούμενης εικόνας.
• κινούμενη εικόνα-επανάληψη-μέτρηση— αριθμός επαναλήψεων κινουμένων σχεδίων. Μπορεί να καθοριστεί είτε απλά ως αριθμός, είτε μπορείτε να ορίσετε άπειρο και το animation θα τρέχει ατελείωτα.

Εδώ είναι μόνο οι βασικές ιδιότητες, οι οποίες είναι υπεραρκετές για να δημιουργήσετε το πρώτο σας CSS3 animation.

Το τελευταίο πράγμα που πρέπει να γνωρίζουμε και να κατανοήσουμε από τη θεωρία είναι πώς να δημιουργήσουμε βασικά πλαίσια. Αυτό είναι επίσης εύκολο να γίνει και γίνεται χρησιμοποιώντας τον κανόνα @keyframes, εντός του οποίου καθορίζονται τα βασικά πλαίσια. Η σύνταξη αυτού του κανόνα είναι η εξής:

Πάνω ορίζουμε το πρώτο και το τελευταίο καρέ. Όλες οι ενδιάμεσες καταστάσεις θα υπολογίζονται ΑΥΤΟΜΑΤΑ!

2. Παράδειγμα πραγματικού κινουμένου σχεδίου CSS3

Η θεωρία, ως συνήθως, είναι βαρετή και όχι πάντα ξεκάθαρη. Είναι πολύ πιο εύκολο να δείτε τα πάντα χρησιμοποιώντας ένα πραγματικό παράδειγμα, αλλά είναι καλύτερο να το κάνετε μόνοι σας σε κάποια δοκιμαστική σελίδα HTML.

Όταν μαθαίνετε μια γλώσσα προγραμματισμού, συνήθως γράφετε ένα πρόγραμμα «Hello, world!», από το οποίο μπορείτε να κατανοήσετε τη σύνταξη αυτής της γλώσσας και κάποια άλλα βασικά πράγματα. Αλλά δεν μελετάμε μια γλώσσα προγραμματισμού, αλλά μια γλώσσα περιγραφής εμφάνισηέγγραφο. Επομένως, θα έχουμε το δικό μας "Γεια, κόσμο!"

Εδώ είναι τι θα κάνουμε για παράδειγμα:ας έχουμε κάποιου είδους μπλοκ