Μεταβάσεις CSS3σας επιτρέπει να κάνετε κίνηση της αρχικής τιμής μιας ιδιότητας CSS σε μια νέα τιμή με την πάροδο του χρόνου, ελέγχοντας τον ρυθμό με τον οποίο αλλάζουν οι τιμές των ιδιοτήτων. Οι περισσότερες ιδιότητες αλλάζουν τις τιμές τους σε 16 χιλιοστά του δευτερολέπτου, επομένως ο προτεινόμενος προεπιλεγμένος χρόνος μετάβασης είναι 200 ms.
Η αλλαγή των ιδιοτήτων συμβαίνει όταν συμβαίνει ένα συγκεκριμένο γεγονός, το οποίο περιγράφεται από την αντίστοιχη ψευδο-κλάση. Η πιο συχνά χρησιμοποιούμενη ψευδοκλάση είναι:hover . Αυτή η ψευδο-τάξη δεν λειτουργεί κινητές συσκευέςόπως το iPhone ή το Android. Μια λύση όλα σε ένα που λειτουργεί σε επιτραπέζιους υπολογιστές και προγράμματα περιήγησης για κινητά, θα υπάρχει χειρισμός συμβάντων με χρήση JavaScript (για παράδειγμα, εναλλαγή κλάσεων με κλικ).
Οι μεταβάσεις ισχύουν για όλα τα στοιχεία, καθώς και για τα ψευδοστοιχεία :πριν και :μετά. Για να ορίσετε όλες τις ιδιότητες μιας μετάβασης, η ιδιότητα μετάβασης είναι συνήθως στενογραφία.
Οι μεταβάσεις CSS3 ενδέχεται να μην ισχύουν για όλες τις ιδιότητες και τις τιμές τους. Μια λεπτομερής λίστα μπορεί να βρεθεί στη σελίδα.
Δημιουργία ομαλών αλλαγών στις ιδιότητες στοιχείων
Υποστήριξη προγράμματος περιήγησης
ΔΗΛ.: 10.0
Firefox: 16,0, 4,0 -moz-
Χρώμιο: 26.0, 4.0 -webkit-
σαφάρι: 6.1, 3.1 -webkit-
ΛΥΡΙΚΗ ΣΚΗΝΗ: 12.1, 11.6 -o-
iOS Safari: 7.1
Opera Mini: —
Πρόγραμμα περιήγησης Android: 4.4, 4.1 -webkit-
Chrome για Android: 44
1. Μετάβαση ονόματος ιδιοκτησίας-ιδιότητα
Περιέχει το όνομα των ιδιοτήτων CSS στις οποίες θα εφαρμοστεί το εφέ μετάβασης. Μια τιμή ιδιότητας μπορεί να περιέχει είτε μια μεμονωμένη ιδιότητα είτε μια λίστα ιδιοτήτων διαχωρισμένη με κόμμα. Κατά τη δημιουργία μιας μετάβασης, μπορείτε να χρησιμοποιήσετε και τις καταστάσεις έναρξης και λήξης ενός στοιχείου. Το ακίνητο δεν κληρονομείται.
Τα εφέ που δημιουργούνται πρέπει να είναι διακριτικά. Δεν απαιτούν όλες οι ιδιότητες ομαλή αλλαγή με την πάροδο του χρόνου, κάτι που σχετίζεται με την εμπειρία χρήστη. Για παράδειγμα, όταν τοποθετούμε το δείκτη του ποντικιού πάνω από έναν σύνδεσμο, θέλουμε να δούμε μια στιγμιαία αλλαγή στο χρώμα του συνδέσμου ή στο χρώμα και το στυλ της υπογράμμισης. Επομένως, οι μεταβάσεις θα πρέπει να χρησιμοποιούνται για εκείνες τις ιδιότητες στις οποίες πρέπει πραγματικά να επιστήσετε την προσοχή.
Σύνταξη
Div (πλάτος: 100 px; ιδιότητα μετάβασης: πλάτος; ) div:hover (πλάτος: 300 px; )
2. Διάρκεια μετάβασης μετάβαση-διάρκεια
Καθορίζει το χρονικό διάστημα κατά το οποίο θα πρέπει να πραγματοποιηθεί η μετάβαση. Εάν διαφορετικές ιδιότητες έχουν διαφορετικές τιμές μετάβασης, διαχωρίζονται με κόμμα. Εάν η διάρκεια της μετάβασης δεν έχει καθοριστεί, τότε η κίνηση δεν θα εμφανίζεται κατά την αλλαγή των τιμών των ιδιοτήτων. Το ακίνητο δεν κληρονομείται.
Σύνταξη
Div (μετάβαση-διάρκεια: 0,2 δευτ.;)
3. μετάβαση-χρονισμός-συνάρτηση
Η ιδιότητα καθορίζει μια συνάρτηση χρόνου που περιγράφει την ταχύτητα με την οποία ένα αντικείμενο μεταβαίνει από τη μια τιμή στην άλλη. Εάν ορίσετε περισσότερες από μία μεταβάσεις για ένα στοιχείο, όπως το χρώμα φόντου και η θέση του στοιχείου, μπορείτε να χρησιμοποιήσετε μια διαφορετική συνάρτηση για κάθε ιδιότητα. Το ακίνητο δεν κληρονομείται.
| μετάβαση-χρονισμός-συνάρτηση | |
|---|---|
| Αξίες: | |
| ευκολία | Η προεπιλεγμένη λειτουργία, η μετάβαση ξεκινά αργά, επιταχύνεται γρήγορα και επιβραδύνεται στο τέλος. Ταιριάζει cubic-bezier(0.25,0.1,0.25,1) . |
| γραμμικός | Η μετάβαση γίνεται ομοιόμορφα καθ' όλη τη διάρκεια του χρόνου, χωρίς διακυμάνσεις στην ταχύτητα. Ταιριάζει cubic-bezier(0,0,1,1) . |
| ευκολία | Η μετάβαση ξεκινά αργά και στη συνέχεια επιταχύνεται σταδιακά στο τέλος. Ταιριάζει κυβικά-μπεζιέ(0,42,0,1,1) . |
| ευκολία | Η μετάβαση ξεκινά γρήγορα και αργά αργά στο τέλος. Αντιστοιχεί σε cubic-bezier(0,0,0,58,1) . |
| ευκολία εισόδου | Η μετάβαση αρχίζει αργά και τελειώνει αργά. Ταιριάζει cubic-bezier(0,42,0,0,58,1) . |
| κυβικός (x1, y1, x2, y2) | Σας επιτρέπει να ορίσετε μη αυτόματα τιμές από 0 έως 1 για την καμπύλη επιτάχυνσης. μπορείτε να δημιουργήσετε οποιαδήποτε διαδρομή μετάβασης. |
| αρχικός | Ορίζει την τιμή μιας ιδιότητας στην προεπιλεγμένη τιμή της. |
| κληρονομώ | Κληρονομεί την τιμή της ιδιότητας από το γονικό στοιχείο. |
Σύνταξη
Div (συνάρτηση μετάβασης-χρονομέτρησης: γραμμική;)
Για πιο ρεαλιστικά κινούμενα σχέδια, χρησιμοποιήστε την κυβική συνάρτηση Bézier:
Ρύζι. 1. Προσαρμοσμένες κυβικές λειτουργίες Bézier από το easings.net | προσαρμοσμένο όνομα | Τιμή συνάρτησης |
|---|---|
| easeInSine | cubic-bezier(0,47, 0, 0,745, 0,715) |
| easeOutSine | κυβικός (0,39, 0,575, 0,565, 1) |
| easeInOutSine | cubic-bezier(0,445, 0,05, 0,55, 0,95) |
| easeInQuad | cubic-bezier(0,55, 0,085, 0,68, 0,53) |
| easeOutQuad | cubic-bezier(0,25, 0,46, 0,45, 0,94) |
| easeInOutQuad | cubic-bezier(0,455, 0,03, 0,515, 0,955) |
| easeInCubic | cubic-bezier(0,55, 0,055, 0,675, 0,19) |
| easeOutCubic | cubic-bezier(0,215, 0,61, 0,355, 1) |
| easeInOutCubic | cubic-bezier(0,645, 0,045, 0,355, 1) |
| easeInQuart | cubic-bezier(0,895, 0,03, 0,685, 0,22) |
| easeOutQuart | cubic-bezier(0,165, 0,84, 0,44, 1) |
| easeInOutQuart | κυβικός (0,77, 0, 0,175, 1) |
| easeInQuint | cubic-bezier(0,755, 0,05, 0,855, 0,06) |
| easeOutQuint | κυβικός (0,23, 1, 0,32, 1) |
| easeInOutQuint | cubic-bezier(0,86, 0, 0,07, 1) |
| easeInExpo | cubic-bezier(0,95, 0,05, 0,795, 0,035) |
| easeOutExpo | cubic-bezier(0,19, 1, 0,22, 1) |
| easeInOutExpo | κυβισμός (1, 0, 0, 1) |
| easeInCirc | cubicbezier(0,6, 0,04, 0,98, 0,335) |
| easeOutCirc | cubic-bezier(0,075, 0,82, 0,165, 1) |
| easeInOutCirc | cubic-bezier(0,785, 0,135, 0,15, 0,86) |
| easeInBack | cubic-bezier(0,6, -0,28, 0,735, 0,045) |
| easeOutBack | cubic-bezier(0,175, 0,885, 0,32, 1,275) |
| easeInOutBack | cubic-bezier(0,68, -0,55, 0,265, 1,55) |
4. μετάβαση-καθυστέρηση
Μια προαιρετική ιδιότητα που σας επιτρέπει να βεβαιωθείτε ότι η αλλαγή ιδιότητας δεν θα συμβεί αμέσως, αλλά με κάποια καθυστέρηση. Δεν κληρονομείται.
Σύνταξη
Div (μετάβαση-καθυστέρηση: .5s;)
5. Περίληψη μετάβασης
Όλα τα ακίνητα υπεύθυνα για την αλλαγή εμφάνισηστοιχείο, μπορεί να συνδυαστεί σε μια ενιαία ιδιότητα μετάβασης
μετάβαση: μετάβαση-ιδιότητα μετάβαση-διάρκεια μετάβαση-χρονισμός-συνάρτηση μετάβαση-καθυστέρηση;
Αν χρησιμοποιήσουμε τις προεπιλεγμένες τιμές, τότε η καταχώρηση
Div(μετάβαση: 1s;)
θα είναι ισοδύναμο
Div (μετάβαση: all 1s ease 0s;)
6. Ομαλή μετάβαση πολλών ιδιοτήτων
Μπορείτε να καθορίσετε πολλές διαδοχικές μεταβάσεις για ένα στοιχείο αναφέροντάς τις διαχωρισμένες με κόμματα. Κάθε μετάβαση μπορεί να επισημοποιηθεί με τη δική της συνάρτηση χρόνου.
Div (μετάβαση: φόντο 0,3s ευκολία, χρώμα 0,2s γραμμικό;)
Div ( ιδιότητα μετάβασης: ύψος, πλάτος, χρώμα φόντου, μετάβαση-διάρκεια: 3 δευτερόλεπτα, λειτουργία μετάβασης-χρονισμού: ευκολία, ευκολία, γραμμική, )
7. Παραδείγματα μεταβάσεων για διάφορες ιδιότητες
Τοποθετήστε το ποντίκι σας πάνω από τα μπλοκ για να δείτε τις ιδιότητες σε δράση.
Το CSS3 μας δίνει νέα ομορφιά και ανέσεις. Σε ορισμένες περιπτώσεις, δεν χρειάζεται πλέον να καταφεύγετε στη χρήση flash και javascript για να δημιουργήσετε οποιοδήποτε ασυνήθιστο εφέ. Η ιδιότητα μετάβασης CSS είναι ένα χαρακτηριστικό παράδειγμα μιας τέτοιας κατάστασης. Νομίζω ότι όλοι γνωρίζουν την ψευδο-κλάση :hover. Με αυτό, αλλάξτε τιμές cssιδιότητες ενός στοιχείου όταν τοποθετείτε τον δείκτη του ποντικιού πάνω του με το ποντίκι. Για παράδειγμα, υπήρχε ένα γκρι μπλοκ με μια μαύρη επιγραφή, που αιωρούνταν πάνω του με το ποντίκι και έγινε μαύρο με μια λευκή επιγραφή.
Να πώς είναι γραμμένο:
Μπλοκ (μέγεθος γραμματοσειράς: 20 εικονοστοιχεία; χρώμα φόντου:#808080; χρώμα:#000000; πλάτος: 325 εικονοστοιχεία; συμπλήρωση: 18 εικονοστοιχεία 0; δρομέας: δείκτης; στοίχιση κειμένου: κέντρο; ) .blok:hover (χρώμα φόντου:# 000000; χρώμα:#ffffff; )
Και να πώς φαίνεται:
Δείξτε μου
Μπορείτε επίσης να κάνετε το μπλοκ, όταν τοποθετείτε το δείκτη του ποντικιού πάνω του, εκτός από το χρώμα φόντου και το χρώμα του κειμένου, να αλλάζετε και το πλάτος. Για να το κάνετε αυτό, γράψτε τον κώδικα CSS ως εξής:
Blok1 (μέγεθος γραμματοσειράς: 20 εικονοστοιχεία; χρώμα φόντου:#808080; χρώμα:#000000; πλάτος: 325 εικονοστοιχεία; συμπλήρωση: 18 εικονοστοιχεία 0; δρομέας: δείκτης; στοίχιση κειμένου: κέντρο; ) .blok1: αιώρηση (χρώμα φόντου:# 000000; χρώμα:#ffffff; πλάτος:355px;)
Δείτε πώς θα ήταν σε αυτήν την περίπτωση:
Δείξτε μου
Όλα θα ήταν καλά, αλλά, όπως μπορείτε να δείτε, οι ιδιότητες αλλάζουν τις τιμές τους πολύ απότομα, την ίδια στιγμή, και δεν φαίνεται πολύ ωραίο. Τι να κάνω? Είναι πολύ απλό: χρησιμοποιήστε το ακίνητο Μετάβαση CSS.
Σχετικά με την ιδιοκτησία μετάβασης
Η ιδιότητα μετάβασης κάνει τη μετάβαση από το ένα στυλ στο άλλο ομαλή. Για παράδειγμα, το χρώμα ενός μπλοκ όταν τοποθετείτε τον δείκτη του ποντικιού πάνω του με το ποντίκι δεν θα αλλάξει απότομα, αλλά σε μια συγκεκριμένη χρονική περίοδο. Η μετάβαση, παρεμπιπτόντως, μεταφρασμένη στα ρωσικά σημαίνει "μετάβαση". Το ακίνητο έχει την εξής καταχώρηση:
Div (μετάβαση: χρώμα 1s 1s γραμμικό; )
Φυσικά, μπορούν να χρησιμοποιηθούν άλλες τιμές αντί για τις υποδεικνυόμενες τιμές. Τα περισσότερα προγράμματα περιήγησης εξακολουθούν να μην δέχονται δεδομένη περιουσίαστην τυπική του μορφή, επομένως πρέπει να χρησιμοποιούνται προθέματα.
Div ( μετάβαση: χρώμα 1s 1s γραμμικό; -moz-transition:color 1s 1s γραμμικό; -webkit-transition:color 1s 1s γραμμικό; -o-transition:color 1s 1s γραμμικό; )
Στα παραδείγματα, υποδεικνύεται μια σύντομη έκδοση της εγγραφής, η λεπτομερής έχει την ακόλουθη μορφή:
Div ( transition-property:color; transition-duration:1s; transition-delay:1s; transition-timing-function:linear; -moz-transition-property:color; -moz-transition-duration:1s; -moz-transition -delay:1s; -moz-transition-timing-function:linear; -webkit-transition-property:color; -webkit-transition-duration:1s; -webkit-transition-delay:1s; -webkit-transition-timing- συνάρτηση: γραμμική; -o-ιδιότητα-μετάβασης:χρώμα; -o-μετάβαση-διάρκεια:1 δευτ.; -o-μετάβαση-καθυστέρηση:1δ.
ΣΕ μεταβατική ιδιοκτησίαορίζει την ιδιότητα στην οποία θα εφαρμοστεί η ενέργεια μετάβασης. Για παράδειγμα: χρώμα, χρώμα φόντου, πλάτος, ύψος, αριστερά, αδιαφάνεια, ορατότητα και πολλά άλλα. Μπορείτε να καθορίσετε πολλές ιδιότητες διαχωρισμένες με κόμμα. Εάν θέλετε να εφαρμόσετε μια μετάβαση σε όλες τις πιθανές ιδιότητες ταυτόχρονα, ορίστε την ιδιότητα μετάβασης σε όλες. ΣΕ μετάβαση-διάρκειαυποδεικνύουν το χρόνο κατά τον οποίο θα πραγματοποιηθεί η μετάβαση, σε μετάβαση-καθυστέρησηο χρόνος μετά τον οποίο θα ξεκινήσει η μετάβαση. Η συνάρτηση μετάβασης-χρονισμού καθορίζει τον τύπο μετάβασης, ας σταθούμε σε αυτήν την ιδιότητα με περισσότερες λεπτομέρειες.
Μάθετε περισσότερα σχετικά με τη λειτουργία μετάβασης-χρονισμού
Ιδιοκτησία μετάβαση-χρονισμός-συνάρτησηκαθορίζει πώς θα αλλάξουν οι ενδιάμεσες τιμές κατά τη μετάβαση, με άλλα λόγια, πώς θα αλλάξει η ταχύτητα μετάβασης κατά τη διάρκεια του χρόνου που καθορίζεται στην ιδιότητα μετάβασης-διάρκειας. Για παράδειγμα, η μετάβαση μπορεί να ξεκινήσει γρήγορα, αλλά να επιβραδυνθεί στο τέλος ή να μην αλλάξει την ταχύτητά της για όλη την ώρα. Η συνάρτηση transition-timing μπορεί να έχει τις ακόλουθες τιμές:
- γραμμική - Η ταχύτητα της μετάβασης δεν αλλάζει από την αρχή μέχρι το τέλος. Ισοδυναμεί με cubic-bezier(0,0,1,1).
- ευκολία - αργή εκκίνηση, μετά επιτάχυνση και επιβράδυνση στο τέλος. Ισοδυναμεί με cubic-bezier(0,25,0,1,0,25,1).
- ευκολία - αργή εκκίνηση. Ισοδυναμεί με cubic-bezier(0,42,0,1,1).
- ease-out - επιβραδύνετε στο τέλος. Ισοδυναμεί με cubic-bezier(0,0,0,58,1).
- ευκολία εισόδου - αργή εκκίνηση και τερματισμός. Ισοδυναμεί με cubic-bezier(0,42,0,0,58,1).
- cubic-bezier(n,n,n,n) - σας επιτρέπει να ορίσετε τις δικές σας τιμές από 0 έως 1.
Τοποθετήστε το δείκτη του ποντικιού πάνω από το επόμενο μπλοκ με το ποντίκι και δείτε μόνοι σας πώς πραγματοποιείται η μετάβαση με μια συγκεκριμένη λειτουργία.
Όπως μπορείτε να δείτε, ανάλογα με την τιμή που έχει η ιδιότητα transition-timing-function, η μετάβαση μπορεί να γίνει με εντελώς διαφορετικούς τρόπους. Αν και μερικές φορές αυτή η διαφορά δεν είναι πολύ αισθητή, για παράδειγμα, εάν η μετάβαση-διάρκεια έχει οριστεί σε μια μικρή προσωρινή τιμή ή το μπλοκ για το οποίο εκτελείται το εφέ έχει μικρές διαστάσεις κ.λπ.
Παραδείγματα χρήσης της ιδιότητας μετάβασης
Για να σας διευκολύνουμε να καταλάβετε πώς να χρησιμοποιήσετε σωστά την ιδιότητα μετάβασης, ακολουθούν μερικά παραδείγματα. Θα ξεκινήσω, ίσως, με το πιο απλό. Θυμάστε το μπλοκ με αλλαγή πλάτους και χρώματος όταν τοποθετείτε τον δείκτη του ποντικιού πάνω του στην αρχή της ανάρτησης; Ας κάνουμε το ίδιο πράγμα τώρα, χρησιμοποιώντας απλώς την ιδιότητα μετάβασης.
Παράδειγμα 1
Primer_1 (μέγεθος γραμματοσειράς: 20 εικονοστοιχεία; χρώμα φόντου:#808080; χρώμα:#000000; πλάτος: 325 εικονοστοιχεία; γέμιση: 18 εικονοστοιχεία 0; δρομέας: δείκτης; στοίχιση κειμένου: κέντρο; μετάβαση: όλα τα 1 γραμμικά; -moz-μετάβαση: all 1s γραμμικά; -webkit-transition:all 1s linear; -o-transition:all 1s linear; ) .primer_1:hover ( background-color:#000000; color:#ffffff; πλάτος:355px; )
Δείξτε μου
Το παράδειγμα που χρησιμοποιήθηκε γραμμική συνάρτηση, θα το χρησιμοποιήσω αργότερα στην ανάρτηση. Φυσικά, μπορείτε να χρησιμοποιήσετε απολύτως οποιοδήποτε. Η ιδιότητα μετάβασης ορίστηκε σε όλα, δηλαδή όλες οι πιθανές ιδιότητες, δηλαδή το χρώμα φόντου, το χρώμα κειμένου και το πλάτος, άλλαξαν τις τιμές τους ταυτόχρονα και χρησιμοποιώντας την ίδια λειτουργία. Προκειμένου κάθε ιδιότητα να αλλάξει διαφορετικά, πρέπει να τις γράψετε χωρισμένες με κόμμα διαφορετικές αξίες. Σαν αυτό:
Primer_1_1 (μέγεθος γραμματοσειράς: 20 px; χρώμα φόντου:#808080; χρώμα:#000000; πλάτος: 325 εικονοστοιχεία; συμπλήρωση: 18 εικονοστοιχεία 0; δρομέας: δείκτης; στοίχιση κειμένου: κέντρο; μετάβαση: χρώμα φόντου 1s γραμμικό, χρώμα 1s 1s ease-in-out, πλάτος 1s 2s ease; -moz-transition: background-color 1s linear, color 1s 1s ease-in-out, πλάτος 1s 2s easy; -webkit-transition: background-color 1s γραμμικό, χρώμα 1s 1s -o-transition: background-color 1s γραμμικό, χρώμα 1s 1s ease-in-out, πλάτος 1s 2s ease; ) .primer_1_1:hover ( background-color:#000000; color :#ffffff;width:355px; )
Δείξτε μου
Σε αυτήν την περίπτωση, όλες οι ιδιότητες άλλαξαν τις τιμές τους με τη σειρά τους, ξεκινώντας από το χρώμα φόντου και τελειώνοντας με το πλάτος. Κάθε ακίνητο έχει τη δική του λειτουργία.
Παράδειγμα 2
Καταλάβαμε τα χρώματα και τα μεγέθη. Τώρα ας φτιάξουμε ένα μπλοκ που εξαφανίζεται εν κινήσει.
Primer_2 (μέγεθος γραμματοσειράς: 20 px; χρώμα φόντου:#808080; χρώμα:#000000; πλάτος: 325 εικονοστοιχεία; συμπλήρωση: 18 εικονοστοιχεία 0; δρομέας: δείκτης; στοίχιση κειμένου: κέντρο; αδιαφάνεια: 1; μετάβαση: όλα τα 2 δευτερόλεπτα γραμμικά; - moz-transition:all 2s 0 linear; -webkit-transition:all 2s linear; -o-transition:all 2s linear; ) .primer_2:hover ( opacity:0; margin-left:50px; )
Δείξτε μου
Με βοήθεια ιδιότητες αδιαφάνειαςκαι το μπλοκ με το αριστερό περιθώριο μετακινείται και εξαφανίζεται μέσα σε δύο δευτερόλεπτα.
Παράδειγμα 3
Άλλο ένα απλό παράδειγμα. Αυτή τη φορά το κείμενο έχει μια λευκή σκιά, αν και σε αυτήν την περίπτωση μοιάζει περισσότερο με τονισμό παρά με μια σκιά, αλλά έτσι ονομάζεται η ιδιότητα.
Primer_3 (μέγεθος γραμματοσειράς: 20 εικονοστοιχεία; χρώμα φόντου:#808080; χρώμα:#000000; πλάτος: 325 εικονοστοιχεία; συμπλήρωση: 18 εικονοστοιχεία 0; δρομέας: δείκτης; στοίχιση κειμένου: κέντρο; μετάβαση: κείμενο-σκιά 1 s γραμμικό; -moz- transition:text-shadow 1s 0 linear; -webkit-transition:text-shadow 1s linear; -o-transition:text-shadow 1s linear; ).primer_3:hover ( text-shadow:0 0 15px #ffffff; )
Δείξτε μου
Το εφαρμόσαμε χρησιμοποιώντας την ιδιότητα text-shadow.
Παράδειγμα 4
Ας περιπλέκουμε λίγο το έργο, ας κάνουμε το μπλοκ να περιστρέφεται.
Primer_4 (μέγεθος γραμματοσειράς: 20 εικονοστοιχεία; χρώμα φόντου:#808080; χρώμα:#000000; πλάτος: 325 εικονοστοιχεία; συμπλήρωση: 18 εικονοστοιχεία 0; δρομέας: δείκτης; στοίχιση κειμένου: κέντρο; μετάβαση: μετατροπή 1,5 δευτερολέπτων γραμμική; -moz-μετάβαση :-moz-transform 1.5s 0 linear; -webkit-transition:-webkit-transform 1.5s linear; -o-transition:-o-transform 1.5s linear; ) .primer_4:hover (transform: rotate(360deg); - moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); )
Δείξτε μου
Συμφωνώ, φαίνεται καλό και δεν θα μαντέψετε αμέσως ότι αυτό έγινε μόνο με CSS. Στο παράδειγμα, παρεμπιπτόντως, χρησιμοποιήθηκε μια άλλη νέα ιδιότητα μετασχηματισμού. Πολλά προγράμματα περιήγησης το διαβάζουν μόνο με προθέματα προμηθευτή. Σημειώστε ότι πρέπει επίσης να προσδιορίζονται στην τιμή της ιδιότητας μετάβασης. Φροντίστε να εγγραφείτε για να μάθετε περισσότερα σχετικά με την ιδιότητα μετασχηματισμού. Σύντομα θα αφιερωθεί ένα ξεχωριστό άρθρο σε αυτό, καθώς και σε πολλά άλλα ακίνητα.
Παράδειγμα 5
Η ιδιότητα μετάβασης CSS, παρεμπιπτόντως, λειτουργεί καλά σε συνδυασμό με την ψευδο-κλάση :active. Σκιαγραφώ αυτό το παράδειγμαθα πρέπει να αυξάνεται όταν κάνετε κλικ και κρατάτε πατημένο το δρομέα του ποντικιού πάνω του. Ας ελέγξουμε?
Primer_5 (μέγεθος γραμματοσειράς: 20 εικονοστοιχεία; χρώμα φόντου:#808080; χρώμα:#000000; πλάτος: 325 εικονοστοιχεία; padding-top: 18 px; ύψος: 38 px; δρομέας: δείκτης; στοίχιση κειμένου: κέντρο; μετάβαση: όλα τα 2s γραμμικά; -moz-transition:all 2s 0 linear; -webkit-transition:all 2s linear; -o-transition:all 2s linear; ) .primer_5:active (πλάτος:375px; ύψος:85px; )
πατήστε και κρατήστε πατημένο
Για την υλοποίηση αυτού του παραδείγματος, χρειαζόταν μόνο να αυξηθούν οι τιμές πλάτους και ύψους στο μπλοκ με την ψευδοκλάση :active.
Υπάρχουν πραγματικά πολλοί τρόποι για να χρησιμοποιήσετε την ιδιότητα μετάβασης CSS και είμαι σίγουρος ότι θα υπάρξουν ακόμη περισσότεροι στο μέλλον. Έφερα μόνο τα περισσότερα απλά παραδείγματαγια να δείξουν τη μετάβαση σε δράση. Οι σύνδεσμοι, παρεμπιπτόντως, στο blog μου αλλάζουν το χρώμα τους όταν αιωρούνται πάνω τους με το ποντίκι με τη βοήθεια αυτού. Νομίζω ότι σε έχω βαρεθεί με ένα γκρι ορθογώνιο, αλλά κατάφερε να δείξει τέλεια όλα όσα ήθελα. Σε συνδυασμό με άλλες ιδιότητες και γραφικά, οι μεταβάσεις μπορούν να κάνουν αρκετά ωραία πράγματα. Δοκιμάστε!
Η ιδιότητα μετάβασης CSS σάς επιτρέπει να ορίσετε όλες τις ιδιότητες ενός εφέ μετάβασης (μια μετάβαση μεταξύ δύο καταστάσεων ενός στοιχείου) σε μία μόνο δήλωση.
Αυτή η ιδιότητα είναι συντομογραφία για τις ακόλουθες ιδιότητες (η λίστα ακολουθεί τη σειρά με την οποία καθορίζονται οι τιμές):
Υποστήριξη προγράμματος περιήγησης
| Ιδιοκτησία | ΛΥΡΙΚΗ ΣΚΗΝΗ | IExplorer | άκρη |
|||
|---|---|---|---|---|---|---|
| μετάβαση | 26.0 4.0 -webkit- | 16.0 4.0 -moz- | 12.1 10.5 -ο- | 6.1 3.1 -webkit- | 10.0 | 12.0 |
Σύνταξη CSS:
μετάβαση: "διάρκεια ιδιότητας χρονισμός-καθυστέρηση λειτουργίας | αρχική | κληρονομιά"; /* επιτρέπεται η λίστα του φαινομένου μετάβασης ξεχωριστά για κάθε ιδιότητα σε μία δήλωση */ /* η σύνταξη θα ήταν: ιδιοκτησία | διάρκεια | λειτουργία χρονισμού | καθυστέρηση,..., ιδιοκτησία | διάρκεια | λειτουργία χρονισμού | καθυστέρηση */ /* δεν επιτρέπονται όλες οι τιμές, αλλά πρέπει να ακολουθήσετε τη σειρά που εμφανίζεται στο επάνω μέρος του παραδείγματος */ /* σημειώστε ότι εάν θέλετε να καθορίσετε μόνο καθυστέρηση, θα πρέπει επίσης να καθορίσετε τη διάρκεια (0s) */ /* δηλ. εάν θέλετε να καθορίσετε μια καθυστέρηση 4 δευτερολέπτων, τότε πρέπει να γράψετε αυτήν τη μετάβαση: 0s 4s; */μετάβαση: πλάτος 2s ease 100ms, ύψος 1s γραμμικό 2s, φόντο 0s 4s; /* Δείτε παράδειγμα στο κάτω μέρος της σελίδας */Σύνταξη JavaScript:
Object.style.transition = "width 3s ease-out 2s"
Αξίες ακινήτων
| Εννοια | Περιγραφή |
|---|---|
| μεταβατική ιδιοκτησία | Καθορίζει το όνομα της ιδιότητας CSS για την οποία πρόκειται να χρησιμοποιηθεί το εφέ μετάβασης. Η προεπιλεγμένη τιμή είναι όλα. |
| μετάβαση-διάρκεια | Καθορίζει πόσα δευτερόλεπτα ή χιλιοστά του δευτερολέπτου διαρκεί το εφέ μετάβασης. |
| μετάβαση-χρονισμός-συνάρτηση | Χρησιμοποιείται για να περιγράψει τον τρόπο υπολογισμού των ενδιάμεσων τιμών Ιδιότητες CSS, το οποίο επηρεάζεται από το φαινόμενο μετάβασης, ενώ χρησιμοποιείται μαθηματική συνάρτηση (κυβική καμπύλη Bezier). Αυτό ουσιαστικά σας επιτρέπει να δημιουργήσετε μια καμπύλη "επιτάχυνσης" έτσι ώστε η ταχύτητα της μετάβασης να μπορεί να αλλάξει κατά τη διάρκεια του εφέ μετάβασης. Η προεπιλεγμένη τιμή είναι η ευκολία. |
| μετάβαση-καθυστέρηση | Καθορίζει πότε θα ξεκινήσει το εφέ μετάβασης (ενεργεί ως καθυστέρηση για την έναρξη του εφέ). Η προεπιλεγμένη τιμή είναι 0 δευτερόλεπτα. |
| Ορίζει μια ιδιότητα στην προεπιλεγμένη τιμή της. | |
| Καθορίζει ότι η τιμή κληρονομείται από το γονικό στοιχείο. |
Έκδοση CSS
CSS3Κληρονόμησε
Οχι.Κινούμενα σχέδια
Οχι.Παράδειγμα χρήσης
Ένα παράδειγμα συρόμενης αναζήτησης σε CSS, χρησιμοποιώντας έναν επιλογέα χαρακτηριστικών (με την καθορισμένη τιμή) και τη γενική ιδιότητα μετάβασης:
Η μετάβαση είναι μια ομαλή αλλαγή στις ιδιότητες ενός στοιχείου όταν τοποθετείτε το δείκτη του ποντικιού πάνω του. Με την ψευδο-κλάση :hover, η αλλαγή είναι στιγμιαία, ενώ η μετάβαση σάς επιτρέπει να ορίσετε τη διάρκεια και τη μέθοδο της μετάβασης.
Ας ξεκινήσουμε με ένα απλό παράδειγμα. Έχουμε πολλές εικόνες, καθεμία από αυτές πρέπει να περιστρέφεται κατά μια μικρή γωνία όταν ο κέρσορας αιωρείται πάνω της (παράδειγμα 1).
Παράδειγμα 1: Εφαρμογή μετάβασης
Μόλις μετακινήσουμε τον κέρσορα πάνω από οποιαδήποτε εικόνα, περιστρέφεται ομαλά κατά 15 μοίρες προς τα αριστερά (Εικ. 1).
Ρύζι. 1. Ομαλή περιστροφή εικόνας
Στα στυλ για :hover , ορίζουμε τις επιθυμητές αλλαγές σε στοιχεία στο hover. Η ίδια η μετάβαση προστίθεται στα στυλ του στοιχείου μέσω της ιδιότητας μετάβασης. Έχει τέσσερις παραμέτρους - μία ή περισσότερες ιδιότητες, μια διάρκεια κινούμενης εικόνας, μια συνάρτηση χρόνου και μια χρονική καθυστέρηση πριν από την κίνηση.
Ιδιότητες
Από προεπιλογή, όλες οι ιδιότητες που καθορίζονται στο :hover είναι κινούμενες. Μερικές φορές ορισμένες ιδιότητες πρέπει να ζωντανεύουν και κάποιες όχι. Σε αυτήν την περίπτωση, όλες οι επιθυμητές ιδιότητες θα πρέπει να διαχωριστούν με κόμμα σε μετάβαση .
Μετάβαση: μετασχηματισμός, περίγραμμα 1s;
Διάρκεια κινουμένων σχεδίων
Αυτός είναι ο χρόνος κατά τον οποίο θα διαρκέσει η κίνηση. Καθορίζεται τόσο σε δευτερόλεπτα (1s, 0,5s) όσο και σε χιλιοστά του δευτερολέπτου (100ms).
Καθυστέρηση κινουμένων σχεδίων
Η κίνηση δεν χρειάζεται να ξεκινήσει αμέσως, είναι αποδεκτό να προσθέσετε μια μικρή καθυστέρηση στην αρχή, μετά το τέλος του καθορισμένου χρόνου, το animation θα ξεκινήσει αμέσως.
Λειτουργία χρόνου
Το animation μπορεί να λάβει χώρα με διαφορετικούς τρόπους. Για παράδειγμα, ξεκινήστε αργά στην αρχή μιας κίνησης και επιταχύνετε στο τέλος ή το αντίστροφο. Υπάρχουν πολλές επιλογές και δημιουργούν όλα τα είδη ενδιαφέροντα εφέ. Η ταχύτητα κινούμενης εικόνας ελέγχεται από μια ειδική λειτουργία που συνδέει το χρόνο και την κίνηση. Εδώ είναι πώς φαίνεται στο γράφημα (Εικ. 2).
Ρύζι. 2. Τύπος συνάρτησης χρόνου
Το σημείο εκκίνησης έχει συντεταγμένες 0,0, 0,0, το τελικό σημείο - 1,0, 1,0, ενώ η συνάρτηση κατά μήκος του άξονα τεταγμένων μπορεί να υπερβεί αυτές τις τιμές πάνω ή κάτω. Ως αποτέλεσμα, θα φαίνεται ότι το στοιχείο κινείται πρώτα προς την αντίθετη κατεύθυνση και μετά προς την επιθυμητή κατεύθυνση. Έτσι μπορείτε να δημιουργήσετε το εφέ της ανάκαμψης ή της αδράνειας. Εδώ είναι οι πιο δημοφιλείς τιμές συνάρτησης χρόνου.
- ευκολία - η κίνηση ξεκινά αργά, στη συνέχεια επιταχύνεται και επιβραδύνεται ξανά προς το τέλος της κίνησης.
- ease-in - το animation ξεκινά αργά και επιταχύνεται προς το τέλος.
- ease-out - το animation ξεκινά γρήγορα, επιβραδύνεται προς το τέλος.
- ease-in-out - το animation ξεκινά και τελειώνει αργά.
- γραμμική - ίδια ταχύτητα από την αρχή μέχρι το τέλος.
Στο παράδειγμα 2, χρησιμοποιείται μια μετάβαση για την ομαλή ολίσθηση του πίνακα προς τα έξω πίσω από το αριστερό άκρο της οθόνης όταν ο κέρσορας του ποντικιού τοποθετείται πάνω του.
Παράδειγμα 2: Χρήση της συνάρτησης χρόνου
Εάν έχετε οποιεσδήποτε ερωτήσεις σχετικά με αυτόν τον κωδικό, καλέστε με στο 555-3298.Υπάρχουν πολλές ιδιότητες στυλ σε αυτό το παράδειγμα, αλλά προορίζονται μόνο για τη δημιουργία του επιθυμητού σχεδίου. Η κίνηση του ποντικιού γίνεται με δύο ιδιότητες - η μετάβαση ορίζει τις παραμέτρους της κίνησης και αριστερά είναι μια ιδιότητα της οποίας η τιμή αλλάζει ομαλά με την πάροδο του χρόνου (σε αυτήν την περίπτωση, μέσα σε ένα δευτερόλεπτο). Αρχικά, το αριστερό είναι -320 px και το μεγαλύτερο μέρος του πίνακα είναι κρυμμένο πίσω από το αριστερό άκρο του προγράμματος περιήγησης, μόνο ένα μικρό μέρος είναι ορατό. Στη συνέχεια, το αριστερό γίνεται μηδέν και έτσι ολόκληρο το πλαίσιο γίνεται ορατό.
Στα στυλ, επιτρέπεται η προσθήκη πολλών μεταβάσεων ταυτόχρονα με διαφορετικές ιδιότητες και εφέ, αυτό σας επιτρέπει να διαφοροποιήσετε τις μεταβάσεις. Το Παράδειγμα 3 δείχνει πώς να δημιουργήσετε ένα κουμπί που αλλάζει ομαλά το χρώμα φόντου, το περίγραμμα και την ετικέτα. Σε αυτήν την περίπτωση, η κίνηση του κειμένου είναι διαφορετική από την κινούμενη εικόνα άλλων τμημάτων.