Εννέα απλά παραδείγματα κινουμένων σχεδίων CSS3. Χρήση CSS Animation

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

1. Magic CS33 Animations

Το Magic CSS3 Animations είναι ένα πακέτο κινούμενων εικόνων CSS3 με ειδικά εφέ που μπορείτε να χρησιμοποιήσετε ελεύθερα για οποιοδήποτε web project. Απλώς συμπεριλάβετε το στυλ CSS magic.css ή μια ελαχιστοποιημένη έκδοση του magic.min.css .

2. Φύλλο εξαπάτησης κινουμένων σχεδίων CSS3

Το CSS3 Animation Cheat Sheet είναι ένα σύνολο από προεγκατεστημένα κινούμενα σχέδια plug-and-play για έργα web. Για να το χρησιμοποιήσετε, πρέπει να προσθέσετε στυλ στον ιστότοπό σας και να εφαρμόσετε προετοιμασμένες κλάσεις CSS στα στοιχεία που θέλετε να κινήσετε. Το CSS3 Animation Cheat Sheet χρησιμοποιεί τον κανόνα @keyframes και λειτουργεί σε όλα τα πιο πρόσφατα προγράμματα περιήγησης (συμπεριλαμβανομένου του IE 10).

3. Βασικά καρέ CSS3

CSS3 Keyframes Animation Generatorείναι ένα διαδικτυακό εργαλείο που σας επιτρέπει να δημιουργείτε κινούμενα σχέδια χρησιμοποιώντας τον κανόνα @keyframes.

4. Μαγεία

Περιλαμβάνει πολλά εφέ CSS. Τα εφέ ταξινομούνται σε διάφορες κατηγορίες ( μαγεία, προοπτική, περιστροφή, τρεμόπαιγμα, στατική, διαφάνειες, κινούμενα σχέδια αιώρησης CSS3), και είναι όλα πολύ όμορφα. Κάθε ένα από αυτά έχει τις δικές του τάξεις. Ο ευκολότερος τρόπος για να τις εφαρμόσετε είναι να προσθέσετε αυτές τις κλάσεις στα στοιχεία προορισμού μέσω JavaScript.

5. Animate.css

Το Animate.css παρέχει ένα σύνολο εφέ κινούμενων σχεδίων CSS3 μεταξύ προγραμμάτων περιήγησης. Τα εφέ μπορούν να χρησιμοποιηθούν για να προσελκύσουν την προσοχή, δημιουργώντας κινούμενα σχέδια με βάση την εμφάνιση και την εξαφάνιση στοιχείων.

6. Αναπήδηση. Js

Αυτό Βιβλιοθήκη JavaScriptγια να δημιουργήσετε δυναμικά κινούμενα σχέδια. Απλώς προσθέστε ένα στοιχείο και επιλέξτε μια προεπιλογή. Μετά από αυτό, μπορείτε να λάβετε μια σύντομη διεύθυνση URL ή να εξαγάγετε την κινούμενη εικόνα CSS3 από τα παραδείγματα.

7. Hover.CSS

Το Hover.CSS είναι μια χρήσιμη συλλογή εφέ CSS3 που μπορεί να χρησιμοποιηθεί για παροτρύνσεις για δράση, κουμπιά, λογότυπα, προσαρμοσμένες εικόνες και άλλα. Για να χρησιμοποιήσετε τη συλλογή, απλώς αντιγράψτε και επικολλήστε τον κώδικα εφέ στο CSS ή τοποθετήστε έναν σύνδεσμο προς το αρχείο στυλ του.

8. Ani.js

Το AniJS είναι μια δηλωτική βιβλιοθήκη κινούμενων σχεδίων CSS που κάνει την ανάπτυξή σας πιο γρήγορη και πιο πλούσια. Είναι πλήρως τεκμηριωμένο και εύκολο στη χρήση.

9. Πρόοδος.js

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

10. Keyframer

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

11. Stylie

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

12.CSS σκίτσο

Το CSSketch είναι ένα πρόσθετο Sketch 3 που σας επιτρέπει να αλλάξετε γρήγορα το σχέδιό σας εισάγοντας φύλλα στυλ. Υποστηρίζει γλώσσα στυλ ( πιο λιγο). Αυτό σας επιτρέπει να χρησιμοποιείτε συναρτήσεις και μεταβλητές στο φύλλο στυλ σας. Το CSSketch είναι εντελώς λογισμικό ανοιχτού κώδικα, ώστε να μπορείτε να συνεισφέρετε στην ανάπτυξή του.

13. Πιο ελαφρύ

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

14. deCSS3

Αυτό είναι ένα εργαλείο για τον έλεγχο της ανοχής σφαλμάτων ( σταδιακή υποβάθμιση) Κωδικός CSS3. Με αυτό, μπορείτε να δείτε πώς θα εμφανίζεται η ιστοσελίδα σε εκδόσεις IE 6-8.

15.GFX

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

Μετάφραση του άρθρου " 15 καλύτερα εργαλεία κινούμενων σχεδίων CSS3 για προγραμματιστές» προετοιμάστηκε από τη φιλική ομάδα του έργου

Το είδαμε πρόσφατα μεταβάσεις- είναι απλά ένας τρόπος κινούμενα σχέδιαιδιότητες στυλ από πρωτότυποπριν τελικόςκατάσταση.

Έτσι, οι μεταβάσεις στο CSS είναι ειδικόςείδος κινουμένων σχεδίων, όπου:

• Υπάρχουν μόνο δύο καταστάσεις: αρχή και τέλος.
• το κινούμενο σχέδιο δεν είναι κυκλικό.
• Οι ενδιάμεσες καταστάσεις ελέγχονται μόνο από μια συνάρτηση χρόνου.

Τι γίνεται όμως αν θέλεις:

• έχουν τον έλεγχο ενδιάμεσοςπολιτείες;
• βρόχοςκινουμένων σχεδίων;
• δημιουργήστε διαφορετικούς τύπους κινούμενων εικόνων για έναςστοιχείο;
• κίνηση μιας συγκεκριμένης ιδιότητας μόνο σε Ήμισυτρόπους;
• μιμούμαι διάφορες λειτουργίες χρόνουγια διαφορετικά ακίνητα;

Η κινούμενη εικόνα σε CSS σας επιτρέπει να κάνετε όλα αυτά και πολλά άλλα.

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

Ιδιότητες κινουμένων σχεδίων

Όπως η μετάβαση , η ιδιότητα κινούμενων εικόνων είναι συντομογραφίαγια μερικούς άλλους:

• animation-name : όνομα κινουμένων σχεδίων;
• animation-duration : πόσο διαρκεί το animation.
• animation-timing-function : πώς υπολογίζονται οι ενδιάμεσες καταστάσεις.
• animation-delay : η κίνηση ξεκινά μετά από κάποιο χρονικό διάστημα.
• animation-itation-count : πόσες φορές πρέπει να εκτελεστεί το animation.
• animation-direction : πρέπει η κίνηση να πηγαίνει προς την αντίθετη κατεύθυνση ή όχι.
• animation-fill-mode : ποια στυλ εφαρμόζονται πριν από την έναρξη της κίνησης και μετά το τέλος της.

Γρήγορο παράδειγμα

Για να κάνετε κίνηση στο κουμπί λήψης, μπορείτε να γράψετε μια κινούμενη εικόνα γερός:

@keyframes bouncing( 0% ( bottom: 0; box-shadow: 0 0 5px rgba(0,0,0,0.5); ) 100% ( bottom: 50px; box-shadow: 0 50px 50px rgba(0,0, 0,0,1 ) .κουμπί φόρτωσης ( animation: αναπηδώντας 0,5s cubic-bezier(0,1,0,25,0,1,1) 0s άπειρα εναλλακτικά και τα δύο; )

Πρώτα πρέπει να γράψετε ένα πραγματικό κινούμενο σχέδιο χρησιμοποιώντας το @keyframes και να το καλέσετε .

χρησιμοποίησα συντομογραφίαιδιότητα κινουμένων σχεδίων και περιλάμβανε όλες τις πιθανές επιλογές:

• animation-name: bouncing (ίδιο με το όνομα keyframe)
• animation-διάρκεια: 0,5s (μισό δευτερόλεπτο)
• animation-timing-function: cubic-bezier(0.1,0.25,0.1,1)
• animation-delay: 0s (χωρίς καθυστέρηση)
• animation-itation-count: άπειρο (παίζει ατελείωτα)
• animation-σκηνοθεσία: εναλλακτική (πηγαίνει εμπρός και πίσω)
• animation-fill-mode: και τα δύο

@keyframes

Πριν εφαρμόσετε κινούμενα σχέδια σε στοιχεία HTML, χρειάζεστε γράψτε μια κινούμενη εικόνα χρησιμοποιώντας βασικά καρέ. Γενικά, τα βασικά πλαίσια είναι το καθένα ενδιάμεσο βήμασε κινούμενα σχέδια. Καθορίζονται χρησιμοποιώντας ποσοστά:

• 0% - πρώτο βήμα κινουμένων σχεδίων.
• Το 50% είναι το μισό βήμα στο animation.
• Το 100% είναι το τελευταίο βήμα.

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

Μπορείτε να ορίσετε όσα βασικά καρέ θέλετε, όπως 33%, 4% ή ακόμα και 29,86%. Στην πράξη, θα γράψετε μόνο μερικά από αυτά.

Κάθε πλαίσιο κλειδιού είναι Κανόνας CSS, αυτό σημαίνει ότι μπορείτε να γράψετε ιδιότητες CSS ως συνήθως.

Για να ορίσετε μια κινούμενη εικόνα, απλώς γράψτε τη λέξη-κλειδί @keyframes μαζί της όνομα:

@keyframes γύρω ( 0% ( αριστερά: 0; επάνω: 0; ) 25% ( αριστερά: 240 εικονοστοιχεία; επάνω: 0; ) 50% ( αριστερά: 240 εικονοστοιχεία; επάνω: 140 εικονοστοιχεία; ) 75% ( αριστερά: 0; επάνω: 140 εικονοστοιχεία ) 100% (αριστερά: 0; επάνω: 0;) ) p (κινούμενα σχέδια: περίπου 4 δευτερόλεπτα γραμμικό άπειρο;)

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

animation-name

Ονομαχρησιμοποιείται τουλάχιστον το animation εις διπλούν:

• στο Γραφήκινούμενα σχέδια χρησιμοποιώντας @keframes ;
• στο χρήσηκινούμενα σχέδια χρησιμοποιώντας την ιδιότητα animation-name (ή την ιδιότητα σύντομης κίνησης).

@keyframes whatever ( /* ... */ ) .selector ( animation-name: whatever; )

Παρόμοια με τα ονόματα κλάσεων CSS, το όνομα της κινούμενης εικόνας μπορεί να περιλαμβάνει μόνο:

• γράμματα (a-z);
• αριθμοί (0-9);
• κατω παυλα(_);
• παύλα (-).

Το όνομα δεν μπορεί να ξεκινά με έναν αριθμό ή δύο παύλες.

animation-διάρκεια

Όπως η διάρκεια μετάβασης, η διάρκεια της κινούμενης εικόνας μπορεί να ρυθμιστεί σε δευτερόλεπτα(1s) ή χιλιοστά του δευτερολέπτου(200 ms).

Επιλογέας (κινούμενα σχέδια-διάρκεια: 0,5 δευτ.;)

Η προεπιλεγμένη τιμή είναι 0s, που σημαίνει ότι δεν υπάρχει καθόλου κίνηση.

animation-timing-function

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

Επιλογέας ( animation-timing-function: easy-in-out;)

Προεπιλεγμένη τιμή: ευκολία.

Εφόσον η κίνηση στο CSS χρησιμοποιεί βασικά καρέ, μπορείτε να ορίσετε γραμμικόςλειτουργία του χρόνου και προσποιούμαισυγκεκριμένη καμπύλη Bezier ορίζοντας πολλά πολύ συγκεκριμέναβασικά πλαίσια. Ρίξτε μια ματιά στο Bounce.js για προηγμένη δημιουργία κινούμενων εικόνων.

animation-καθυστέρηση

Όπως και με την καθυστέρηση μετάβασης, η καθυστέρηση κινούμενης εικόνας μπορεί να ρυθμιστεί σε δευτερόλεπτα(1s) ή χιλιοστά του δευτερολέπτου(200 ms).

Η προεπιλογή είναι 0s, που σημαίνει καμία καθυστέρηση κανενός είδους.

Χρήσιμο όταν συμπεριλαμβάνονται πολλές κινούμενες εικόνες σειρά.

A, .b, .c ( animation: bouncing 1s; ) .b ( animation-delay: 0,25s; ) .c ( animation-delay: 0,5s; )

κινούμενη εικόνα-επανάληψη-μέτρηση

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

• ακέραιους αριθμούς, όπως 2 ή 3.
• κλασματικοί αριθμοί όπως το 0,5, που θα παίξουν μόνο το ήμισυ της κινούμενης εικόνας.
• άπειρη λέξη-κλειδί, που θα επαναλαμβάνει ατελείωτα το animation.

.selector ( animation-iteration-count: infinite; )

animation-σκηνοθεσία

Η ιδιότητα animation-direction καθορίζει εάν με ποια σειράτα βασικά καρέ διαβάζονται.

• κανονικό : ξεκινά από 0%, τελειώνει στο 100%, ξεκινά πάλι από 0%.
• αντίστροφα: ξεκινά από 100%, τελειώνει στο 0%, ξεκινά πάλι στο 100%.
• εναλλακτικό : ξεκινά από 0%, πηγαίνει στο 100%, επιστρέφει στο 0%.
• εναλλακτική-αντίστροφη : ξεκινά από 100%, πηγαίνει στο 0%, επιστρέφει στο 100%.

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

animation-fill-mode

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

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

Η λειτουργία animation-fill-mode σάς επιτρέπει να πείτε στο πρόγραμμα περιήγησης εάν στυλ κινουμένων σχεδίων Επίσηςπρέπει να εφαρμοστεί πέρα από κινούμενα σχέδια.

Ας φανταστούμε κουμπί, το οποίο είναι:

• το κόκκινοΠροκαθορισμένο;
• γίνεται μπλεστην αρχή του κινουμένου σχεδίου.
• και στο τέλος πράσινοςόταν ολοκληρωθεί η κινούμενη εικόνα.

Πριν από την εμφάνιση του CSS3, η λέξη "animation" έκανε τους σχεδιαστές layout να νιώσουν κρύος ιδρώτας. Και όλα αυτά γιατί εκείνες τις μέρες η δημιουργία υψηλής ποιότητας και όμορφων κινουμένων σχεδίων δεν ήταν κάτι τετριμμένο. Το CSS δεν μπορούσε να το κάνει αυτό, επομένως όλα τα κινούμενα σχέδια έγιναν σε JavaScript. Ήταν απαραίτητο να ψάξετε σε ένα σωρό φόρουμ, να βρείτε τους ίδιους συντρόφους στην ατυχία, να αφιερώσετε πολύ χρόνο στην ανάπτυξη και στο τέλος να ακούσετε από τον σχεδιαστή: "Εντάξει, θα γίνει". Και όταν τελικά βγήκε το CSS3, τα πυροτεχνήματα δεν σταμάτησαν μέχρι το πρωί και η σαμπάνια κυλούσε σαν ποτάμι. Ήταν μια υπέροχη μέρα για όλους τους προγραμματιστές ιστού (την επόμενη τέτοια μέρα ήταν όταν η Microsoft ανακοίνωσε το τέλος της υποστήριξης για τον Internet Explorer). Με την έλευση του CSS3, πολλές προηγουμένως περίπλοκες εργασίες έχουν γίνει απλές και ευχάριστες στην εργασία. Το ίδιο ισχύει και για τα κινούμενα σχέδια σε CSS, για τα οποία θα μιλήσω σε αυτό το άρθρο.

Μεταβάσεις CSS

Οι μεταβάσεις CSS σάς επιτρέπουν να κάνετε αλλαγές στις ιδιότητες CSS ομαλά και με την πάροδο του χρόνου. Με αυτόν τον τρόπο, έχετε την ευκαιρία να ελέγξετε τη διαδικασία μετάβασης ενός στοιχείου από τη μια κατάσταση στην άλλη. Ας ξεκινήσουμε με το πιο απλό παράδειγμα και ας προχωρήσουμε.

Όταν τοποθετείτε το δείκτη του ποντικιού πάνω από το τετράγωνο, το χρώμα του φόντου αλλάζει ομαλά.

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

• μεταβατική ιδιοκτησία?
• μετάβαση-διάρκεια?
• μετάβαση-χρονομέτρηση-συνάρτηση?
• μετάβαση-καθυστέρηση?
• μετάβαση;

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

Μετάβαση-ιδιότητα: πλάτος;

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

Μετάβαση-διάρκεια: 1s;

μετάβαση-χρονισμός-συνάρτηση- λειτουργία χρόνου, καθορίζει τα σημεία επιτάχυνσης και επιβράδυνσης για μια ορισμένη χρονική περίοδο για τον έλεγχο των αλλαγών στην ταχύτητα κινούμενων εικόνων. Με απλά λόγια, μπορείτε να χρησιμοποιήσετε αυτήν την ιδιότητα για να καθορίσετε τη συμπεριφορά για μια κινούμενη εικόνα. Για παράδειγμα, μπορούμε να επιταχύνουμε το animation στην αρχή και να το επιβραδύνουμε στο τέλος ή το αντίστροφο. Οι καμπύλες Bezier χρησιμοποιούνται για τον καθορισμό της διαδικασίας κινούμενης εικόνας. Γενικά, η συνάρτηση transition-timing-σας επιτρέπει να δημιουργήσετε πολλές διαφορετικές συμπεριφορές για κινούμενα σχέδια, αυτό είναι ένα ολόκληρο θέμα για ένα άρθρο, επομένως δεν θα εμβαθύνουμε εδώ.

Λειτουργία μετάβασης-χρονισμού: κυβικό-bezier(0, 0, 1, 1);

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

Μετάβαση-καθυστέρηση: 500ms;

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

Μετάβαση: χρώμα φόντου 1s cubic-bezier(0, 0, 1, 1) 500ms;

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

Με τις μεταβάσεις CSS μπορείτε να κάνετε κίνηση σχεδόν σε όλες τις ιδιότητες και να δημιουργήσετε πολλά ενδιαφέροντα, όμορφα, λειτουργικά και ακόμη και πολύπλοκα κινούμενα σχέδια που θα συμπληρώσουν και θα βελτιώσουν το έργο σας. Για παράδειγμα, έφτιαξα αυτό το Material-FAB ​​σε καθαρό CSS χρησιμοποιώντας μεταβάσεις:

CSS κινούμενα σχέδια

Τα κινούμενα σχέδια CSS σάς επιτρέπουν να δημιουργείτε πιο σύνθετα κινούμενα σχέδια από τις μεταβάσεις CSS. Όλο το μυστικό βρίσκεται στο @keyframes. Ο κανόνας @keyframes σάς επιτρέπει να δημιουργήσετε κινούμενα σχέδια χρησιμοποιώντας ένα σύνολο βασικών καρέ, δηλαδή περιγράφει την κατάσταση ενός αντικειμένου σε μια συγκεκριμένη χρονική στιγμή. Ας δούμε ένα απλό παράδειγμα.

Ο κύκλος μας έχει ζωντανέψει και φαίνεται να πάλλεται.

Υπάρχουν 9 ιδιότητες που σας επιτρέπουν να ελέγχετε κινούμενα σχέδια CSS:

• animation-name?
• animation-διάρκεια?
• animation-timing-function?
• animation-καθυστέρηση?
• animation-iteration-count?
• animation-σκηνοθεσία?
• animation-play-state?
• animation-fill-mode?
• κινουμένων σχεδίων;

animation-name- εδώ είναι το όνομα της κινούμενης εικόνας που συσχετίζει τον κανόνα @keyframes με τον επιλογέα.

Animation-name: my-animation; @keyframes my-animation ( 0% ( αδιαφάνεια: 0; ) 100% ( αδιαφάνεια: 1; ) )

κινούμενη εικόνα-επανάληψη-μέτρηση- ορίζει τον αριθμό των επαναλήψεων της κινούμενης εικόνας, η προεπιλεγμένη τιμή είναι 1. Η τιμή άπειρη σημαίνει ότι η κινούμενη εικόνα θα παίζει ατελείωτα.

Κινούμενα σχέδια-επανάληψη-μέτρηση: 2;

animation-σκηνοθεσία- ορίζει την κατεύθυνση της κινούμενης εικόνας.

Κινούμενα σχέδια-σκηνοθεσία: αντίστροφη;

animation-play-state- αυτή η ιδιότητα ελέγχει τη διακοπή και την αναπαραγωγή της κινούμενης εικόνας. Υπάρχουν δύο τιμές, η εκτέλεση (η κινούμενη εικόνα αναπαράγεται, από προεπιλογή) και η παύση (σταματά η κινούμενη εικόνα).

Animation-play-state: σε παύση.

animation-fill-mode- ορίζει ποιες ιδιότητες CSS θα εφαρμοστούν στο αντικείμενο πριν ή μετά την κίνηση. Μπορεί να λάβει τις ακόλουθες τιμές:

• καμία - κινούμενες ιδιότητες CSS θα εφαρμοστούν στο αντικείμενο μόνο κατά την αναπαραγωγή της κινούμενης εικόνας και μετά την ολοκλήρωση το αντικείμενο θα επιστρέψει στην αρχική του κατάσταση.
• προς τα εμπρός - οι ιδιότητες κινούμενων CSS θα εφαρμοστούν στο αντικείμενο μετά την ολοκλήρωση της αναπαραγωγής της κινούμενης εικόνας.
• προς τα πίσω - κινούμενες ιδιότητες CSS θα εφαρμοστούν στο αντικείμενο πριν ξεκινήσει η αναπαραγωγή της κινούμενης εικόνας.
• Και οι δύο - κινούμενες ιδιότητες CSS θα εφαρμοστούν στο αντικείμενο τόσο πριν όσο και μετά το τέλος της κινούμενης εικόνας.

Λειτουργία κίνησης-γεμίσματος: προς τα πίσω.

Ιδιότητες animation-διάρκεια, animation-timing-function, animation-καθυστέρησηΛειτουργούν με τον ίδιο τρόπο όπως παρόμοιες ιδιότητες σε μεταβάσεις CSS, για τις οποίες έγραψα νωρίτερα, επομένως δεν θα τις επαναλάβω.

Με τα κινούμενα σχέδια CSS μπορείτε να δημιουργήσετε αρκετά πολύπλοκα κινούμενα σχέδια χωρίς τη χρήση JavaScript. Ένα εντυπωσιακό παράδειγμα είναι τα loaders, δηλαδή στοιχεία που δείχνουν ότι κάτι φορτώνεται στη σελίδα σας. Να μερικά παραδείγματα:

Μονάδα διαδρομής κίνησης

Το Motion Path Module CSS σάς επιτρέπει να δημιουργείτε κίνηση αντικειμένων κατά μήκος μιας διαδρομής μέσω της ειδικής ιδιότητας motion-path. Προηγουμένως, μια τέτοια κίνηση μπορούσε να γίνει μόνο με χρήση SVG ή σύνθετων σεναρίων.

Αυτή η προδιαγραφή έχει 3 ιδιότητες:

• μονοπάτι κίνησης?
• μετατόπιση κίνησης;
• κίνηση-περιστροφή?

μονοπάτι κίνησης- αυτή η ιδιότητα σάς επιτρέπει να καθορίσετε τα σημεία (συντεταγμένες) κατά μήκος των οποίων θα κινείται το αντικείμενο. Η σύνταξη είναι ίδια με το χαρακτηριστικό διαδρομής SVG.

Διαδρομή κίνησης: διαδρομή("M 235.323 Q 412.440 365.615 Q 400.300 670.240 L 870.340 L 975.535 Q 730.600 630.535 z");

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

@keyframes airplane-fly ( 0% ( μετατόπιση κίνησης: 0; ) 100% ( μετατόπιση κίνησης: 100%; ) )

κίνηση-περιστροφή- αυτή η ιδιότητα σάς επιτρέπει να καθορίσετε ποια πλευρά προς τα εμπρός θα μετακινηθεί το αντικείμενο. Μπορείτε να καθορίσετε αυτόματη, αντίστροφη ή τη δική σας τιμή σε μοίρες ("-45deg", "30deg" κ.λπ.).

Κίνηση-περιστροφή: αυτόματη;

Δυστυχώς, το motion-path προς το παρόν υποστηρίζεται μόνο σε Chrome και Opera, αλλά ας ελπίσουμε ότι και άλλα προγράμματα περιήγησης θα ακολουθήσουν σύντομα το παράδειγμά τους, γιατί το πράγμα είναι πραγματικά χρήσιμο.

Για όσους δεν έχουν καταλάβει ακόμα πώς λειτουργεί αυτό ή θέλουν να το καταλάβουν καλύτερα, έκανα ένα παράδειγμα (σύνδεσμος για το codeopen).

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

CSS 3D σύννεφα

Σε αυτό το demo θα μπορείτε να δημιουργείτε και να επεξεργάζεστε φανταχτερά σύννεφα σε 3D. Αυτά τα σύννεφα CSS μας καθιστούν σαφές ότι οι δυνατότητες των τεχνολογιών Ιστού είναι σχεδόν απεριόριστες.

Καθαρά λογότυπα CSS

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

Αλφάβητο με κινούμενα σχέδια CSS

Εξαιρετικό και καλλιτεχνικό παράδειγμα χρήσης CSS στο αλφάβητο

Τρισδιάστατη πλοήγηση για τον ιστότοπο

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

Google Doodle με CSS

Ένα από τα πολλά doodle από τη μηχανή αναζήτησης Google, κατασκευασμένο σε CSS. Αυτό είναι ένα εξαιρετικό παράδειγμα καλής χρήσης κινούμενων εικόνων CSS.

Ολισθητής

Ένα καλοφτιαγμένο και υψηλής ποιότητας ρυθμιστικό εικόνας. Συν 4 παραδείγματα στο demo.

Διπλό κινούμενο δαχτυλίδι

Ένα όμορφο κινούμενο και πολύχρωμο δαχτυλίδι με όχι πολύ κώδικα CSS

Θάμπωμα στο CSS

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

Ο πλήρης οδηγός για το Flexbox

Αυτό το άρθρο αφορά τα αποκριτικά μπλοκ Flexbox. Μιλάει εντελώς για αυτά τα μπλοκ, αν και το άρθρο είναι στα αγγλικά.

Πολύχρωμο και κινούμενο μενού στο CSS3

Ένα όμορφο αναπτυσσόμενο μενού για έναν ιστότοπο με εικονίδια. Ένα τεράστιο πλεονέκτημα είναι ότι είναι κατασκευασμένο εξ ολοκλήρου σε CSS.

Φίλτρα CSS

Υλικό υψηλής ποιότητας στα αγγλικά, το οποίο μιλά για τη χρήση φίλτρων CSS σε εικόνες.

Φόρμες CSS

Μια ανάρτηση σχετικά με τις φόρμες CSS με πολλά παραδείγματα

Γραμμές προόδου στο CSS

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

Κινούμενα σχέδια - Animate.css

Το πιο δημοφιλές έργο CSS animation στο Διαδίκτυο σήμερα. Και ίσως το πιο απλό και ποιοτικό, και επίσης δωρεάν.

Ενδείξεις φόρτωσης - Spinkit

Για να είμαι ειλικρινής, αυτοί οι δείκτες έχουν ήδη δει στο blog, αλλά μου φαίνεται ότι αξίζει να σας δείξω ξανά. Γιατί αυτοί είναι οι πιο όμορφοι δείκτες CSS στο Διαδίκτυο.

Κουμπιά

Σήμερα είναι δύσκολο να εκπλήξεις με τα κουμπιά CSS, αλλά αυτή είναι μια αρκετά αξιοπρεπής επιλογή

Γεννήτρια για τη δημιουργία διακοπτών

Μια μικρή και υψηλής ποιότητας εφαρμογή Διαδικτύου με την οποία μπορείτε να δημιουργήσετε όμορφους διακόπτες για χρήση στον ιστότοπο.

Συμβουλές εργαλείων

Βιβλιοθήκη CSS για δωρεάν συμβουλές εργαλείων - Hint.css

Σχέδια χρωμάτων

Σχέδια χρωμάτων για άτομα που δεν τους αρέσει να εμβαθύνουν στον κώδικα

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

Η μετακίνηση μπορεί να είναι λίγο τρελή, όπως αυτό:

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

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

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

Μετασχηματισμός με translate3d()

Όταν μετακινείτε ένα στοιχείο, η κάθετη και η οριζόντια θέση του αλλάζουν. Υπάρχουν πολλές ιδιότητες CSS που χρησιμοποιούνται για αυτό. Θέλω όμως να σας προτείνω να χρησιμοποιήσετε τη συνάρτηση translate3d της ιδιότητας μετασχηματισμού αντί για το συνηθισμένο περιθώριο , padding , αριστερά , επάνω γιατί παρέχει πιο ομαλή κίνηση.

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

Το όρισμα X καθορίζει οριζόντια κίνηση, Y - κάθετη κίνηση. Για παράδειγμα, εάν θέλετε να μετακινήσετε περιεχόμενο 20 pixel προς τα δεξιά και προς τα πάνω, η συνάρτηση translate3d θα πρέπει να μοιάζει με αυτό:

Foo (μετασχηματισμός: translate3d(20px, 20px, 0px); )

Δεν θα εξετάσουμε το τρίτο όρισμα, το οποίο καθορίζει την κίνηση κατά μήκος του άξονα Z. Επειδή μας ενδιαφέρουν τα εφέ CSS 2d-hover.

Όπως μπορείτε να δείτε, η λειτουργία translate3d δεν είναι ιδιαίτερα περίπλοκη. Στη συνέχεια θα δούμε πώς να το χρησιμοποιήσετε σε κινούμενα σχέδια CSS για να δημιουργήσετε κίνηση.

Μετάβαση

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

ImageContainer img (θέση: σχετική; επάνω: 0 εικονοστοιχεία; μετάβαση: μετασχηματισμός .2s ease-in-out; )

Αφού ορίσετε μια μετάβαση, μπορείτε να ορίσετε την ιδιότητα μετασχηματισμού με τη συνάρτηση translate3d:

PictureContainer img:hover (μετασχηματισμός: translate3d(0px, -150px, 0px); )

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

Κινουμένων σχεδίων

Σε περίπτωση κινούμενης εικόνας, βεβαιωθείτε ότι τα βασικά καρέ στο @keyframes περιέχουν μια ιδιότητα μετασχηματισμού με translate3d:

@keyframes bobble ( 0% ( μετασχηματισμός: translate3d(50px, 40px, 0px); animation-timing-function: ease-in; ) 50% (translate: translate3d(50px, 50px, 0px); animation-timing-function: ease -out; ) 100% (μετασχηματισμός: translate3d(50px, 40px, 0px); )

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

Μην ξεχνάτε τα προθέματα

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

Μεταβάσεις με JavaScript

Μπορείτε επίσης να δημιουργήσετε κινούμενα κινούμενα σχέδια σε JavaScript. Οι ίδιοι κανόνες ισχύουν και εδώ. Πρώτα πρέπει να ορίσετε τη θέση χρησιμοποιώντας το transform translate3d, αλλά στο JavaScript αυτό είναι λίγο πιο περίπλοκο.

Το απόσπασμα κώδικα που απαιτείται για αυτό μοιάζει με αυτό:

συνάρτηση getSupportedPropertyName(properties) ( for (var i = 0; i< properties.length; i++) { if (typeof document.body.style] != "undefined") { return properties[i]; } } return null; } var transform = ["transform", "msTransform", "webkitTransform", "mozTransform", "oTransform"]; var item = document.querySelector("#theItem"); var transformProperty = getSupportedPropertyName(transform); if (transformProperty) { item.style = translate3d(someValueX, someValueY, 0px); }

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

Γιατί δεν μας βοηθά να ορίσουμε τη θέση χρησιμοποιώντας περιθώριο , επάνω , αριστερά , κ.λπ.;

Εκτός και αν έχετε συγκεκριμένο λόγο για να το κάνετε αυτό, μην χρησιμοποιείτε το περιθώριο ιδιοτήτων CSS , το padding , το top , το αριστερό , το κάτω ή το δεξί για να δημιουργήσετε εφέ αιώρησης. Αν και αυτό μπορεί να φαίνεται αντιφατικό. Να διευκρινίσω...

Περιττοί υπολογισμοί

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

Μπορείτε να ορίσετε τη θέση του στοιχείου στο οποίο μετακινείτε είτε σταθερή είτε απόλυτη. Αυτό θα γλιτώσει το πρόγραμμα περιήγησης από τον υπολογισμό της διάταξης για ολόκληρο το έγγραφο. Αλλά σε αυτήν την περίπτωση, το πρόγραμμα περιήγησης εξακολουθεί να εκτελεί υπολογισμούς στο στοιχείο που κινείται. Και το αποτέλεσμα της χρήσης του translate3d δεν θα είναι απαραίτητα το ίδιο με το αποτέλεσμα που προκύπτει με χρήση περιθωρίου, padding κ.λπ. Επιπλέον, όπως θα δείτε στην επόμενη ενότητα, δεν θα είναι 100% πανομοιότυπα.

Επιτάχυνση υλικού

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

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

Πώς να διασφαλίσετε ότι η κινούμενη εικόνα σε λειτουργία επιτάχυνσης υλικού χρησιμοποιεί τη GPU; Εφαρμόστε το translate3d! Όταν μετασχηματίζετε ένα στοιχείο χρησιμοποιώντας το translate3d, υποβάλλεται σε επεξεργασία μέσω της GPU σε προγράμματα περιήγησης Webkit όπως το Chrome και το Safari ( που είναι εγκατεστημένα σε iPhone και iPad), στον Internet Explorer 9/10, καθώς και στις πιο πρόσφατες εκδόσεις του Firefox. Αυτό δίνει στο translate3d σαφή πλεονεκτήματα.

Τι γίνεται με το JavaScript;

Όσον αφορά τα εφέ αιώρησης CSS που δημιουργούνται σε JavaScript, όπου όλη η παρεμβολή γίνεται με κώδικα, δεν ξέρω πραγματικά αν η χρήση της GPU είναι τόσο παραγωγική. Αλλά χρησιμοποιεί τη GPU για να ορίσει μεταβάσεις JavaScript και κινούμενα σχέδια CSS με την ιδιότητα translate3d.

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

Ο Θεός να ευλογεί τη μεταμόρφωση!

Ο λόγος που ο μετασχηματισμός είναι πιο αποτελεσματικός είναι επειδή δεν επηρεάζει άλλα στοιχεία. Τυχόν ενέργειες που εκτελείτε ισχύουν για ένα μόνο στοιχείο και το πρόγραμμα περιήγησης δεν χρειάζεται να δημιουργήσει ξανά ολόκληρο το παράθυρο. Τροποποιεί μόνο το τμήμα της οθόνης που περιέχει το κινούμενο περιεχόμενο. Αυτό δεν εξαρτάται από το εάν η GPU εμπλέκεται ή όχι.