Πώς να χρησιμοποιήσετε τις μεταβάσεις CSS3

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

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

Υποστήριξη προγράμματος περιήγησης

Όλα τα σύγχρονα προγράμματα περιήγησης (yes even IE!) Υποστηρίζουν τώρα τις μεταβάσεις του CSS. Ωστόσο, σημαντικό, εάν οι μεταβάσεις δεν υποστηρίζονται στο πρόγραμμα περιήγησης που χρησιμοποιείται, η μετάβαση αγνοείται και οι αλλαγές ιδιοτήτων θα εφαρμοστούν αμέσως. Αυτή η χαλαρή υποβάθμιση είναι ένας ακρογωνιαίος λίθος της βέλτιστης πρακτικής.

Προκειμένου να επεκτείνουμε το φάσμα της υποστήριξης του προγράμματος περιήγησης, μπορούμε να χρησιμοποιήσουμε τα προθέματα των πωλητών, επεκτείνοντας το χαρακτηριστικό ώστε να συμπεριλάβει τα Firefox 4-15, το Opera 10.5-12 και τις περισσότερες εκδόσεις του Chrome και του Safari. Ο κώδικας, συμπεριλαμβανομένων των εναλλακτικών του προθέματος προμηθευτή, φαίνεται ως εξής:

div {-o-transition: all 1s ease;-moz-transition: all 1s ease;-webkit-transition: all 1s ease;transition: all 1s ease;}

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

Παράμετροι μετάβασης

Υπάρχουν τέσσερις παράμετροι για μεταβάσεις CSS:

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

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

Ιδιότητες που μπορούν να μετατραπούν

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

Ο πλήρης κατάλογος των ιδιοτήτων που μπορούν να μεταβιβαστούν είναι ως εξής:

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

Χρησιμοποιώντας μεταβάσεις

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

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

Business
  Κώδικας 
  Σχέδιο 
  Εμπνευση 
  Διάφορα 
  Κινητό 
  Νέα 
  Πόροι 
  Ευχρηστία 
  Το πλήκτρο ακέραιου αριθμούσε έναν ante inline σύνδεσμο   venenatis dapibus posuere velit aliquet.  Ο αριθμός των αναγνωρισμένων αναγνωρισμένων φορέων είναι μικρότερος.  Ολόκληρη η ένδειξη είναι μια προηγούμενη εκδοχή της επιλογής του πλήκτρου.  Nullam quis risus eget urna mollis στο πλαίσιο της ευρωζώνης. 

Δείτε πώς φαίνεται:

Χρησιμοποιείτε μεταβάσεις CSS3; Ποιες συνέπειες έχετε δημιουργήσει; Ενημερώστε μας στα σχόλια.

Προτεινόμενη εικόνα / μικρογραφία, εικόνα κίνησης μέσω Shutterstock.