Τα κινούμενα σχέδια σε μια ιστοσελίδα μπορούν να προσελκύσουν περισσότερους χρήστες. Ρωτήστε τον εαυτό σας - αν επρόκειτο να δείτε μια ιστοσελίδα που έχει αρκετά κινούμενα σχέδια, δεν θα θέλατε να εξερευνήσετε περισσότερα; Τώρα, με τις μεταβάσεις CSS μπορείτε να κάνετε τη δουλειά σας ζωντανή με μερικές υπέροχες κινούμενες εικόνες. Και, θυμηθείτε, αυτά πρέπει να γίνουν σωστά. Ας εξερευνήσουμε τον κόσμο των μεταβάσεων CSS με την ακόλουθη σειρά:
- Γιατί CSS Transitions;
- Η μεταβατική ιδιότητα
- Τι πρέπει να προσδιορίσετε;
- Η ιδιότητα συνάρτησης Transition-timing-function
- Η ιδιότητα Transition-Delay
Γιατί CSS Transitions;
Ας πάρουμε ένα παράδειγμα. Εάν επρόκειτο να αλλάξετε το χρώμα ενός στοιχείου από λευκό σε μπλε, αυτή η αλλαγή είναι σχεδόν στιγμιαία. Για ένα πιο κινούμενο εφέ, μπορείτε να κάνετε αυτήν την αλλαγή να πραγματοποιηθεί σταδιακά. Αυτό φαίνεται επίσης αρκετά οπτικό. Ενεργοποιώντας τις μεταβάσεις CSS, μπορείτε να προσαρμόσετε τον τρόπο με τον οποίο πραγματοποιούνται οι αλλαγές. Μπορείτε να ορίσετε πώς συμβαίνουν οι αλλαγές στα στοιχεία σε συγκεκριμένα χρονικά διαστήματα που ακολουθούν μια καμπύλη επιτάχυνσης.
Οι μεταβάσεις CSS σάς επιτρέπουν να ορίσετε τις αλλαγές για στοιχεία, τα συγκεκριμένα χρονικά διαστήματα, την ταχύτητα της καμπύλης επιτάχυνσης και πολλά άλλα. Μπορείτε να τα κάνετε όλα αυτά χωρίς να χρησιμοποιήσετε Flash ή JavaScript .
Για καλύτερη κατανόηση, μπορείτε να ανατρέξετε στην παρακάτω εικόνα:
Στην παραπάνω εικόνα, το στοιχείο HTML θα αλλάξει από κόκκινο σε μπλε σε διάστημα ενός δευτερολέπτου. Θα δείτε επίσης το ενδιάμεσο χρώμα όταν πραγματοποιείται η μετάβαση. Εάν δεν πρόκειται να χρησιμοποιήσετε μεταβάσεις CSS, θα παρατηρήσετε ότι η αλλαγή χρώματος από κόκκινο σε μπλε είναι άμεση - δεν θα δείτε το ενδιάμεσο χρώμα. Με τις μεταβάσεις CSS, θα παρατηρήσετε ένα κινούμενο εφέ όταν τα στοιχεία HTML αλλάζουν από την παλιά κατάσταση σε νέα.
Η μεταβατική ιδιότητα
Μπορείτε να χρησιμοποιήσετε την ιδιότητα μετάβασης στενής για τον έλεγχο των μεταβάσεων CSS. Η χρήση αυτής της στενογραφίας δεν είναι μόνο εύκολη, αλλά μπορεί επίσης να αποφύγει παραμέτρους εκτός συγχρονισμού που μπορεί να είναι αρκετά απογοητευτικό να εντοπιστούν σφάλματα στο CSS.
Η ιδιότητα μετάβασης καθορίζει τις ιδιότητες CSS στις οποίες θέλετε το εφέ μετάβασης. Μόνο αυτές οι ιδιότητες CSS είναι κινούμενες.
Σύνταξη:
μετάβαση:
Ως αρχάριος, μπορεί να αντιμετωπίσετε κάποιες δυσκολίες στη χρήση της στενογραφίας. Εάν πιστεύετε ότι η χρήση του στεντούρα είναι λίγο περίπλοκη για εσάς αυτήν τη στιγμή, μπορείτε να καθορίσετε τις ιδιότητες μετάβασης ξεχωριστά. Για ένα στοιχείο HTML, μπορείτε να καθορίσετε τις ιδιότητες μετάβασης μία προς μία, όπως φαίνεται στο παρακάτω παράδειγμα:
div {πλάτος: 100px ύψος: 100px φόντο: lightblue μετάβαση-ιδιότητα: πλάτος μετάβαση-διάρκεια: 2s μετάβαση-χρονισμός-λειτουργία: γραμμική μετάβαση-καθυστέρηση: 1s} div: hover {πλάτος: 300px}Τοποθετήστε τον δείκτη του ποντικιού πάνω από το κουτί
Στο παραπάνω παράδειγμα, έχουμε καθορίσει τις ιδιότητες (μετάβαση-ιδιότητα, μετάβαση-διάρκεια, μετάβαση-χρονισμός-λειτουργία και μετάβαση-καθυστέρηση) και τις τιμές τους ξεχωριστά. Θα μάθουμε σύντομα για αυτές τις ιδιότητες μετάβασης.
Τι πρέπει να προσδιορίσετε;
Υπάρχουν κυρίως δύο πράγματα που πρέπει να καθορίσετε για να δημιουργήσετε μεταβάσεις CSS: η ιδιότητα CSS στην οποία θέλετε να προσθέσετε ένα εφέ και η χρονική διάρκεια αυτού του εφέ.Πρέπει να έχετε κατά νου ένα πράγμα - όταν δεν καθορίζετε τη διάρκεια του χρόνου, η μετάβαση θα έχει μια προεπιλεγμένη τιμή 0 και δεν θα υπάρξει κανένα αποτέλεσμα.
Ας δούμε ένα παράδειγμα:
Ο παρακάτω κώδικας καθορίζει ένα εφέ μετάβασης της ιδιότητας πλάτους για διάρκεια πέντε δευτερολέπτων.
div {πλάτος: 100px ύψος: 100px φόντο: μπλε μετάβαση: πλάτος 5s} div: hover {πλάτος: 600px}Μετακινήστε τον κέρσορα πάνω από το στοιχείο div παραπάνω, για να δείτε το εφέ μετάβασης.
Στον παραπάνω κώδικα, θα δείτε ότι όταν τοποθετείτε τον κέρσορα πάνω από το μπλε πλαίσιο, το μπλε πλαίσιο αυξάνει σταδιακά το πλάτος του για χρονική διάρκεια πέντε δευτερολέπτων. Θα παρατηρήσετε επίσης ότι όταν αφαιρείτε τον κέρσορα από το μπλε κουτί, το μπλε πλαίσιο θα επιστρέψει στα αρχικά του μεγέθη σταδιακά (όχι στιγμιαία). Μπορείτε επίσης να αλλάξετε τις τιμές για το πλάτος και τη διάρκεια του χρόνου για να δείτε πώς αυτή η ιδιότητα μετάβασης επηρεάζει το στοιχείο HTML.
Μπορείτε επίσης να προσθέσετε το εφέ μετάβασης σε περισσότερες από μία ιδιότητες. Μπορείτε να το κάνετε χρησιμοποιώντας κόμματα για να διαχωρίσετε τις ιδιότητες. Ας δούμε ένα παράδειγμα:
μετασχηματισμούς στην πληροφορική με παράδειγμα
Στον παρακάτω κώδικα, η ιδιότητα μετάβασης καθορίζεται για πλάτος, ύψος και μετασχηματισμό.
div {padding: 15px πλάτος: 150px ύψος: 100px background: πράσινο μετάβαση: πλάτος 2s, ύψος 2s, μετασχηματισμός 2s} div: hover {πλάτος: 300px ύψος: 200px μετασχηματισμός: περιστροφή (360deg)} Γειά σου Κόσμε (Αιωρηθείτε πάνω μου)
Με το παραπάνω παράδειγμα, θα δείτε πώς κινείται το πράσινο κουτί όταν τοποθετείτε το δείκτη του ποντικιού πάνω από το κουτί.
Έχουμε καθορίσει μόνο την ιδιότητα και τη διάρκεια του χρόνου. Ας δούμε τις άλλες παραμέτρους με διάφορα παραδείγματα.
Η ιδιότητα συνάρτησης Transition-timing-function
Αυτή η ιδιότητα καθορίζει την καμπύλη ταχύτητας για το εφέ μετάβασης. Μπορεί να λάβει τις ακόλουθες τιμές:
- Ευκολία αξίας: Αυτή είναι η προεπιλεγμένη τιμή όπου το αποτέλεσμα είναι αργό στην αρχή, έπειτα γρηγορότερο και τελειώνει αργά.
- Γραμμική τιμή: Αυτό το εφέ δεν μεταβάλλει την ταχύτητα της μετάβασης - διατηρεί την ταχύτητα συνεπή από την αρχή έως το τέλος.
- Εύκολη τιμή: Αυτό το εφέ ξεκινά αργά.
- Εύκολη αξία: Αυτό το αποτέλεσμα έχει αργό τέλος.
- Εύκολη τιμή σε έξοδο: Αυτό το εφέ έχει αργό και αργό τέλος.
- Τιμή κυβικού-bezier (n, n, n, n): Μπορείτε να καθορίσετε το δικό σας σύνολο τιμών στη συνάρτηση cubic-bezier.
Ο παρακάτω κώδικας δείχνει τα εφέ μετάβασης για τιμές γραμμικής, ευκολίας, ευκολίας, ευκολίας και ευκολίας στην έξοδο.
div {πλάτος: 100px ύψος: 100px φόντο: ροζ μετάβαση: πλάτος 2s} # div1 {transisi-timing-function: linear} # div2 {transi-timing-function: easy} # div3 {Transaction-Timing-Function: easy-in } # div4 {transisi-timing-function: easy-out} # div5 {transi-timing-function: easy-in-out} div: hover {πλάτος: 300px}Τοποθετήστε τον δείκτη του ποντικιού πάνω από τα στοιχεία div παρακάτω
γραμμικός
ευκολία
ευκολία
ευκολία
ευκολία-έξω
Η ιδιότητα Transition-Delay
Μερικές φορές, θέλετε ένα κινούμενο σχέδιο να πραγματοποιείται μετά από μια συγκεκριμένη χρονική διάρκεια. Η ιδιότητα μετάβασης-καθυστέρησης σάς επιτρέπει να καθορίσετε την καθυστέρηση για ένα εφέ μετάβασης. Μπορείτε να καθορίσετε την καθυστέρηση σε δευτερόλεπτα.
Ας πάρουμε ένα παράδειγμα για να δούμε την καθυστέρηση στο εφέ μετάβασης:
div {πλάτος: 100px ύψος: 100px φόντο: κίτρινο μετάβαση: πλάτος 3s μετάβαση-καθυστέρηση: 1s} div: hover {πλάτος: 300px}Τοποθετήστε τον δείκτη του ποντικιού πάνω από το στοιχείο div παρακάτω
Σημείωση: Μπορείτε να παρατηρήσετε ότι καθυστέρηση 1 δευτερολέπτου πριν ξεκινήσει το εφέ
Στον παραπάνω κωδικό, όταν τοποθετείτε το δείκτη του ποντικιού πάνω από το κίτρινο κουτί, θα παρατηρήσετε (για ένα δευτερόλεπτο) ότι δεν υπάρχει αποτέλεσμα. Μετά από αναμονή ενός δευτερολέπτου, θα παρατηρήσετε το αποτέλεσμα.
Με αυτό, καταλήγουμε στο τέλος αυτού του άρθρου CSS Transitions. Μπορείτε να προσθέσετε κινούμενες εικόνες στις ιστοσελίδες σας τώρα. Δοκιμάστε αυτά τα παραδείγματα.
Ρίξτε μια ματιά στο δικό μας που έρχεται με ζωντανή εκπαίδευση με καθοδήγηση εκπαιδευτή και πραγματική εμπειρία έργου. Αυτή η εκπαίδευση σας κάνει ικανό σε δεξιότητες για να εργαστείτε με τεχνολογίες ιστού back-end και front-end Περιλαμβάνει εκπαίδευση σε Web Development, jQuery, Angular, NodeJS, ExpressJS και MongoDB.
Έχετε μια ερώτηση για εμάς; Παρακαλώ αναφέρετέ το στην ενότητα σχολίων του blog 'CSS Transition' και θα επικοινωνήσουμε μαζί σας.