Πώς να κάνετε καλή χρήση των κινήσεων CSS3: Εκμάθηση, κώδικες δειγμάτων και παραδείγματα

Άρθρο που γράφτηκε από:
  • Κατασκευή Ιστοσελίδων
  • Ενημερώθηκε: Aug 28, 2013

Όταν χρησιμοποιούμε το JS και το jQuery, έχουμε τον πλήρη έλεγχο των κινούμενων εικόνων και μπορούμε να δημιουργήσουμε κάποια συναρπαστικά αποτελέσματα, αλλά η τιμή είναι αρκετά υψηλή. Ο χρόνος επεξεργασίας, η συμβατότητα μεταξύ των browsers (οι κινητές συσκευές, για παράδειγμα, είναι αρκετά διαφορετικές όταν πρόκειται για JS) και η ίδια η πολυπλοκότητα του κώδικα είναι σημεία που πρέπει να έχουμε κατά νου όταν δημιουργούμε κινούμενες διεπαφές.

Έτσι, σήμερα θα δούμε πώς να αποφύγουμε την JS χρησιμοποιώντας CSS Animations and Transitions. Θα συζητήσουμε από τα πολύ βασικά βήματα σε μερικά τρομερά εφέ, όπως πίνακες ακορντεόν και κινούμενα υπο-μενού.

Πιάστε ένα κάθισμα, σημειωματάριό σας και ένα πραγματικό πρόγραμμα περιήγησης (οτιδήποτε άλλο εκτός IE) και ας ξεκινήσουμε.

Ζέσταμα

Έχουμε αρκετά πλεονεκτήματα (και μειονεκτήματα όπως όλα στη ζωή μας) στη χρήση animations CSS. Αν χρειαστεί να τα πουλήσετε στον προϊστάμενό σας ή στον πελάτη σας, αυτό πρέπει να έχετε κατά νου:

  • Είναι δυνητικά ταχύτερα, δεδομένου ότι μπορούν να κάνουν χρήση της επιτάχυνσης υλικού (ως υλοποιήσεις HTML5)
  • Θα λειτουργούν καλύτερα σε κινητές συσκευές και δεν χρειάζονται συγκεκριμένο κώδικα για την παρακολούθηση συμβάντων αφής
  • Το JS πρέπει να ερμηνεύεται από το πρόγραμμα περιήγησης και οι πιθανότητες να σπάσει το πρόγραμμα περιήγησης είναι πολύ μεγαλύτερες. Έτσι, όταν αποτύχει το CSS, αποτυγχάνει σιωπηλά ενώ το JS μπορεί να σπάσει ολόκληρη τη σελίδα
  • Έχουν πολύ καλή υποστήριξη προγράμματος περιήγησης (αυτός ο ιστότοπος θα σας βοηθήσει να ελέγξετε συγκεκριμένα στατιστικά στοιχεία σχετικά με αυτό: http://caniuse.com/#search )

Παραδείγματα κινήσεων CSS3

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

Pure CSS Twitter αποτυγχάνει φάλαινα

Κινούμενη αποτυχημένη φάλαινα

Κατασκευασμένο από τον Steven Dennis, δείτε αυτό στην πράξη.

Pure CSS Scroll Coke Can
CSS 3 Παραδείγματα κινούμενων εικόνων: Κύλιση κύλισης

Κατασκευασμένο από τον Roman Cortes, δείτε αυτό στην πράξη.

Pure CSS Walking Man

Παραδείγματα κίνησης CSS 3: Ο άνθρωπος με τα πόδια

Κατασκευασμένο από τον Andrew Hoyer, δείτε αυτό στην πράξη.

Να πάρεις τα χέρια σου βρώμικα

Ας ξεκινήσουμε τον κώδικα. Θα χρησιμοποιήσουμε πολύ τα ψευδο-μαθήματα του CSS για να ενεργοποιήσουμε την κινούμενη εικόνα. Για να είμαστε ειλικρινείς, πολλοί προγραμματιστές σας προτείνουν να χρησιμοποιήσετε το JS για να ενεργοποιήσετε και να απενεργοποιήσετε τα κινούμενα σχέδια, αλλά εδώ θα δούμε τον ευκολότερο τρόπο:

#test {φόντο: κόκκινο; } #test: αιώρηση {φόντο: πράσινο; } #test: ενεργό {φόντο: μπλε; } #test: στόχος {φόντο: μαύρο; }}

Έχουμε μερικές άλλες ψευδο-κατηγορίες για να χρησιμοποιήσουμε, αλλά έχετε την ιδέα! Επομένως, αυτό που συμβαίνει αν κάνετε κλικ στο στοιχείο #test (υποθέτοντας ότι είναι ένας σύνδεσμος):

  • Κανονική κατάσταση: Το φόντο θα είναι κόκκινο
  • Περάστε το δείκτη του ποντικιού: Όταν το ποντίκι εισέλθει στην περιοχή στοιχείων, θα έχει πράσινο φόντο
  • Ενεργός: Όταν κάνετε κλικ στον κέρσορα πάνω σε αυτό και ενώ πατηθεί το κουμπί του ποντικιού, το χρώμα φόντου θα είναι μπλε
  • Στόχος: Όταν η τρέχουσα σελίδα έχει #test στη διεύθυνση URL, αυτό το στοιχείο θα είναι μαύρο

Καθένα από αυτά μπορεί να χρησιμοποιηθεί για κινούμενα σχέδια CSS, για παράδειγμα μπορείτε να δημιουργήσετε συνδέσμους 2 για να ενεργοποιήσετε και να απενεργοποιήσετε την κινούμενη εικόνα CSS κάνοντας χρήση του στοιχείου ψευδο-στόχου με αυτόν τον κωδικό:

<a href='#test'> ενεργοποίηση </a> <a href='#'> απενεργοποίηση </a>

Μεταβάσεις CSS

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

.test {/ * μετάβαση-ιδιότητα χρονικής διάρκειας ιδιοκτησίας, * / χρώμα: μπλε; μετάβαση: χρώμα 2s, μέγεθος γραμματοσειράς 2s ease-out; } .test: περάστε {χρώμα: κόκκινο; } .test: ενεργό {font-size: 200%; }}

Όταν τοποθετείτε το στοιχείο .test, θα αλλάξει σταδιακά το χρώμα από το μπλε στο κόκκινο (τι ωραία παλέτα; huh;). Όταν κάνετε κλικ στο στοιχείο, το μέγεθος της γραμματοσειράς θα αυξηθεί σταδιακά στο 200% του προεπιλεγμένου μεγέθους γραμματοσειράς.

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

  • Γραμμική: Ίδια ταχύτητα από την αρχή μέχρι το τέλος
  • Ευκολία: Αργή εκκίνηση
  • Ease-out: αργό τέλος
  • Ευκολία: Αργή εκκίνηση, γρήγορη στη μέση και αργή
  • Ευκολία-Έξοδος: Αργή εκκίνηση, αργό τέλος
  • Cubic-bezier (a, b, c, d): Προσαρμοσμένη ταχύτητα

Η κυβική συνάρτηση Bezier θα δημιουργήσει μια προσαρμοσμένη κινούμενη εικόνα με αριθμούς 4 που διαφέρουν από 0 σε 1, που αντιπροσωπεύει τη μαθηματική καμπύλη για τη διάρκεια της κινούμενης ταχύτητας Χ.

Για καλύτερη συμβατότητα του προγράμματος περιήγησης, θα πρέπει να χρησιμοποιήσετε τα προθέματα προμηθευτών για Opera, Firefox και webkit όπως παρακάτω:

div {πλάτος: 400px; -o-μετάβαση: πλάτος 2s; -moz-transition: πλάτος 2s; -webkit-transition: πλάτος 2s; μετάβαση: πλάτος 2s; }}

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

σώμα {font-size: 1em; } οθόνη @media και (μέγιστο πλάτος: 800px) {body {font-size: 0.8em; }} οθόνη @media και (μέγιστο πλάτος: 400px) {body {μέγεθος γραμματοσειράς: 0.7em; }}

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

σώμα {-ο-μετάβαση: μέγεθος γραμματοσειράς .5 γραμμική; -moz-transition: μέγεθος γραμματοσειράς .5s γραμμική; -webkit-transition: γραμματοσειρά-μέγεθος .5s γραμμική; μετάβαση: μέγεθος γραμματοσειράς .5 γραμμική. }}

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

CSS Animation - Η πραγματική διασκέδαση ξεκινά

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

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

/ * ο ίδιος κώδικας για κάθε προμηθευτή * / @ -o-keyframe my-animation {... @ -moz-keyframe my-animation {... @ -webkit-keyframe my-animation {... / * / @keyframe my-animation {/ * επιλογή πλαισίου * / 0% {/ * στυλ πλαισίου * / Αριστερά: 0px; Κορυφή: 0px; } 25% {Αριστερά: 200px; Κορυφή: 0px; } 50% {Αριστερά: 200px; Κορυφή: 200px; } 75% {Αριστερά: 0px; Κορυφή: 200px; } 100% {Αριστερά: 0px; Κορυφή: 0px; }}

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

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

Για να το εφαρμόσουμε, θα χρησιμοποιήσουμε την ιδιότητα κινούμενης εικόνας και έχει υπο-ιδιότητες 7:

  • Όνομα: το μοναδικό αναγνωριστικό
  • Διάρκεια: Πόσο καιρό θα διαρκέσει από το 0% στο 100%
  • Λειτουργία χρονισμού: σχεδόν το ίδιο με τη λειτουργία χρονισμού μετάβασης
  • Καθυστέρηση: Πόσο καιρό θα πάρει για να ξεκινήσει το 0%
  • Αριθμός επανάληψης: Πόσες επαναλήψεις θα έχουμε ("άπειρη" για έναν άπειρο βρόχο)
  • Κατεύθυνση: κανονική ή εναλλακτική (αντίστροφη)
  • Κατάσταση αναπαραγωγής: εάν η κινούμενη εικόνα είναι σε λειτουργία ή έχει τεθεί σε παύση

Αυτό θα εφαρμόσει την κινούμενη εικόνα στο στοιχείο #test όταν είναι ο στόχος της σελίδας:

#test: στόχος {/ * animation-name | διάρκεια | λειτουργία χρονισμού | καθυστέρηση | διεύθυνση | play-state * / κινούμενα σχέδια: my-animation 10s γραμμική 0s άπειρη κανονική λειτουργία? }}

Με αυτό το πνεύμα μπορούμε να δημιουργήσουμε μερικά εκπληκτικά παραδείγματα.

CSS Μόνο Ακορντεόν

Θα δημιουργήσουμε πτυσσόμενα πλαίσια που θα χρησιμοποιούν τα κινούμενα σχέδια CSS. Εδώ είναι η βασική δομή HTML:

<div class = "accordion"> <a href="#tab1"> Tab 1 </a> <div id = "tab1"> <p> TEXT 1 </ p> tab2 "> Καρτέλα 2 </a> <div id =" tab2 "> <p> ΚΕΙΜΕΝΟ 2 </ div> <a href="#tab3"> Καρτέλα 3 </a> <div id = tab3 "> <p> ΚΕΙΜΕΝΟ 3 </ p> </ div> </ div>

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

/ * οποιοδήποτε div που είναι μέσα στο ακορντεόν * / .accordion div {/ * είναι κρυμμένο από προεπιλογή * / height: 0; υπερχείλιση: κρυφή; / * η μαύρη μαγεία * / μετάβαση: ύψος 1s; } / * όταν το αναφερόμενο div είναι ο στόχος * / .accordion div: στόχος {/ * height: auto δεν θα λειτουργήσει, αλλά αυτό θα λειτουργήσει καλά * / ύψος: 80px; }}

Πολύ απλό, ε; Και έχετε περάσει όλη τη ζωή σας χρησιμοποιώντας JS για αυτό; :)

Μενού μόνο CSS με δευτερεύοντα μενού

Και αυτή είναι μια άλλη μάλλον απλή εφαρμογή. Σίγουρα έχετε ένα μενού πλοήγησης στον ιστότοπό σας και συχνά πρέπει να χρησιμοποιήσουμε κάποια υπομενού εκεί. Ο καλύτερος τρόπος για την εμφάνιση και την απόκρυψη αντικειμένων είναι η χρήση του jQuery, σωστά; Λοιπόν, σκεφτείτε ξανά αφού δοκιμάσετε αυτόν τον κώδικα:

<ul> <li> <a href='#item1'> Στοιχείο 1 </a> </ ul> <li> <a href='#item11'> Στοιχείο 1.1 </a> </ ul> </ li> <li> <li> <a href='#item12'> Στοιχείο 1.2 </a> </ li> </ ul> </a> <div> <ul> <li> <a href='#item2'> Στοιχείο 2 </a> </ li> <li> <a href='#item21'> Στοιχείο 2.1 </a> </ li> </ ul> </ div> </ li> </ ul> </ nav>

Και η μαγεία αρχίζει εδώ:

ένα {/ * απλά κάνοντας τους συνδέσμους ένα καλύτερο * / οθόνη: μπλοκ? padding: 4px; } nav {κείμενο-ευθυγράμμιση: κέντρο; } / * οποιοδήποτε μενού (συμπεριλαμβανομένου του κύριου) * / nav ul {εμφάνιση: inline-block; λίστας-style: κανένας; } ver> li> li {/ * οριζόντια στοιχεία (η κάθετη θα δουλέψει καλά) * / float: left? } nav li div {/ * κατάρρευση κάθε υπομενού * / ύψος: 0; υπερχείλιση: κρυφή; / * Houdini συναισθήματα * / μετάβαση: ύψος 1s? } nav li: hover> div {ύψος: 56px; }}

Ανακεφαλαίωση

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

Έτσι, έχετε χρησιμοποιήσει αυτό πριν; Μπορείτε να σκεφτείτε μια άλλη καλή εφαρμογή για animations CSS; Μοιραστείτε τις σκέψεις σας χρησιμοποιώντας τα σχόλια!

Σχετικά με την Rochester Oliveira

Είμαι σχεδιαστής ιστοσελίδων και επιχειρηματίας από την Itajubá (MG), τη Βραζιλία. Μου αρέσει να γράφω για τα σκοτεινά θέματα και να κάνω μερικά δροσερά πράγματα.

Συνδέω: