css3.gr

Καλώς ήρθατε στο δεύτερο μέρος του οδηγού για τα τέσσερα νέα modules της W3C σχετικά με το CSS 3 πρότυπο. Σε αυτό το κομμάτι θα αναφερθώ στην ενότητα CSS animations που δίνει ακόμη μεγαλύτερο έλεγχο στον designer (συγκριτικά με τα CSS transitions) όσων αφορά στις μεταβολές των ιδιοτήτων των στοιχείων της HTML στον χρόνο.

Το σκεπτικό των CSS Animations που θα περιγράψουμε παρακάτω, λειτουργεί ως επέκταση των CSS transitions, οπότε αν δεν έχετε διαβάσει το πρώτο μέρος του οδηγού, καλό θα ήταν να του ρίξετε μια ματιά. Δεν είναι πυρηνική φυσική, σας δίνω τον λόγο μου (απλά λίγα-ελάχιστα-τόσο δα μαθηματικά).

Έτσι λοιπόν, στα CSS Transitions, ορίζαμε αρχική και τελική τιμή για την ιδιότητα που θέλαμε να μεταβληθεί, ορίζαμε τον τρόπο που θα μεταβληθεί στον χρόνο (timing function) και τα υπόλοιπα τα χειρίζονταν ο browser.

Σε περίπτωση που κάποιος θέλει να έχει μεγαλύτερο έλεγχο πάνω στο animation, όπως στιγμιότυπα, επαναλήψεις, φορά του animation κ.ο.κ. τότε το CSS Animations module, είναι το εργαλείο που χρειάζεται. Η ειδοποιός διαφορά μεταξύ των animations που λαμβάνουν χώρα λόγω CSS transitions και αυτών που δημιουργούνται από CSS animations, είναι πως τα μεν transitions ενεργοποιούνται όταν αλλάζει η τιμή ενός χαρακτηριστικού, τα δε animations αλλάζουν ρητά την τιμή αυτή. Και εξηγώ αμέσως για να μην σας πονοκεφαλιάζω χωρίς λόγο.

Χαρακτηριστικό κομμάτι της ενότητας CSS Animations είναι ο keyframe selector, ή αλλιώς το κομμάτι CSS κώδικα που ορίζει ρητά τι θα αλλάξει, πόσο, πότε και πως, το κομμάτι ουσιαστικά που δίνει μια πιο ζωντανή νότα στο design.

Στο σημείο αυτό θα ήθελα να κάνω μια μικρή παρένθεση. Αρκετοί designers (άλλοι περισσότερο και άλλοι λιγότερο γνωστοί) πιστεύουν πως δεν είναι δουλειά του CSS να χειρίζεται θέματα animation και πως αρμόδιος για αυτό είναι η Javascript και οι fx βιβλιοθήκες που κυκλοφορούν. Προσωπικά πιστεύω πως από την στιγμή που οι δύο αυτές προσεγγίσεις μπορούν να συνεργαστούν (DOM event που στέλει το CSS όταν τελειώνει το animation για παράδειγμα), δεν υπάρχει λόγος να δημιουργούνται τέτοια ερωτήματα. Αν κάποιος θέλει να χρησιμοποιήσει τις συγκεκριμένες ιδιότητες μόνο μέσω javascript μπορεί να το κάνει οποιαδήποτε στιγμή, καθώς οι ιδιότητες CSS των στοιχείων μπορούν εύκολα να προσπελαστούν από την JS.

Κλείνοντας την παρένθεση, ας δούμε παρακάτω πως ορίζεται ο keyframe selector.

@keyframes 'wobble' { 0% { left: 100px; } 40% { left: 150px; } 60% { left: 75px; } 100% { left: 100px; } }

Αρχικά, υπάρχει ο @-κανόνας @keyframes που ακολουθείται από το όνομα του animation (το οποίο ορίζεται από τον χρήστη) το οποίο με την σειρά του περιέχει μέσα σε άγκιστρα μια λίστα από κανόνες που ξεκινούν είτε με τιμές επί τοις εκατό (0%, 2%, 35%, ..., 90%, 100% ) είτε με τις λέξεις from, to.

Αυτή η λίστα τιμών ορίζει το τι θα γίνει κάθε στιγμή του animation, είτε μετρώντας την στιγμή ως το ποσοστό επί της συνολικής διάρκειας της κίνησης (π.χ. αν το animation διαρκεί 10 δευτερόλεπτα, τότε ο κανόνας 10% ορίζει την συμπεριφορά στο πρώτο δευτερόλεπτο), είτε ως τη συμπεριφορά στην αρχή (from ή 0%) ή και τέλος της διαδικασίας (to ή 100%).

Για να είναι σωστά ορισμένος ένας keyframe selector, θα πρέπει στις % τιμές να περιλαμβάνει το σύμβολο '%' και να περιέχει τα αρχικά και τελικά στιγμιότυπα είτε ως 0%, 100% ή from, to.

Μέσα σε κάθε στοιχείο της λίστας, περιλαμβάνονται τα χαρακτηριστικά και οι τιμές τους που αλλάζουν στον χρόνο (όπως στο παραπάνω παράδειγμα το χαρακτηριστικό 'left') αλλά προαιρετικά, η δήλωση animation-timing-function που μπορεί να αλλάζει από keyframe σε keyframe, ώστε να μεταβάλλει τον τρόπο που αλλάζουν τα χαρακτηριστικά στον χρόνο, όπως ακριβώς το transition-timing-function που περιγράψαμε στο πρώτο μέρος του οδηγού.

Έτσι λοιπόν ο keyframe selector μπορεί να πάρει την εξής μορφή:

@keyframes 'bounce' { from { top: 100px; animation-timing-function: ease-out; } 25% { top: 50px; animation-timing-function: ease-in; } 50% { top: 100px; animation-timing-function: ease-out; } 75% { top: 75px; animation-timing-function: ease-in; } to { top: 100px; } }

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

Ο ορισμός ενός CSS Animation, θυμίζει αρκετά τον ορισμό ενός CSS transition, αλλά φυσικά έχει τα δικά του χαρακτηριστικά. Έτσι λοιπόν, για να ορίσουμε το CSS animation, αρχικά ορίζουμε το όνομα στο στοιχείο που θέλουμε να υποστεί την κίνηση. Έτσι λοιπόν αν θέλουμε το animation να εφαρμοστεί σε ένα div στοιχείο, γράφουμε:

div { animation-name: 'bounce'; animation-duration: 5s; animation-iteration-count: 10; }

Ας εξηγήσουμε με την σειρά τις ιδιότητες που εισαγάγαμε.

Ιδιότητες

animation-name

Το animation-name, είναι το όνομα του animation που θα εφαρμόσουμε και όπως καλά καταλάβατε, πρέπει να ταιριάζει με το όνομα ενός σωστά ορισμένου keyframe selector κάπου αλλού στον CSS κώδικα. Στην περίπτωσή μας, αναφέρεται στο ακριβώς προηγούμενο παράδειγμα.

animation-duration

Ακόμη μια αρκετά απλή ιδιότητα, το animation-duration ορίζει την διάρκεια της κίνησης για ένα κύκλο του animation. Ως αρχική τιμή ορίζεται το 0 που ουσιαστικά δεν υπάρχει animation.

animation-iteration-count

Και για να μην σας δημιουργούνται αμέσως ερωτηματικά, οι 'κύκλοι του animation' ορίζονται από την ιδιότητα animation-iteration-count. Δηλαδή, πόσες φορές θα παίξει η κίνηση. Έτσι αν το animation-duration είναι 5 δευτερόλεπτα και το animation-iteration-count 10, η συνολική διάρκεια θα είναι 5*10 = 50 δευτερόλεπτα. Ως αρχική τιμή ορίζεται ο ένας κύκλος (1).

animation-timing-function

Όπως αναφέραμε προηγουμένως, η συγκεκριμένη ιδιότητα μπορεί να χρησιμοποιηθεί εντός του keyframe selector. Σε περίπτωση λοιπόν που η ιδιότητα animation-timing-function έχει οριστεί στα keyframes, τότε χρησιμοποιείται αυτή, αλλιώς γίνεται χρήση της animation-timing-function που έχει οριστεί στον selector του αντικειμένου όπως τα παραπάνω properties και θεωρείται 'καθολική'. Ως αρχική τιμή ορίζεται η συνάρτηση 'ease'.

animation-direction

Η ιδιότητα animation-direction παίρνει δύο τιμές: normal και alternate και ορίζει το πως θα παίζεται το animation στους ζυγούς κύκλους. Δηλαδή, αν έχουν οριστεί 10 κύκλοι (animation-iteration-count: 10), τότε ο designer έχει την δυνατότητα να ορίσει πως στους κύκλους 1,3,5,7 και 9 θα παίζει όπως έχει οριστεί ενώ στους 2,4,6,8 και 10 θα εκτελείται ανάποδα, ορίζοντας το animation-direction: alternate. Η αρχική τιμή της ιδιότητας είναι προφανώς normal.

animation-delay

Με ακριβώς ίδια συμπεριφορά όπως η ιδιότητα transition-delay, το animation-delay επιτρέπει στον designer να δώσει καθυστέρηση στην κίνηση (με θετική τιμή) ή την αίσθηση πως η κίνηση είχε ήδη αρχίσει πριν την εκτέλεση του animation (με αρνητική τιμή). Αρχική τιμή το 0.

animation-play-state

Τελευταία ιδιότητα είναι το animation-play-state που όπως αναφέρεται και στο πρόχειρο του CSS animations module μάλλον πρόκειται να αφαιρεθεί. Παρόλα αυτά μπορούμε να το αναφέρουμε συνοπτικά. Η ιδιότητα animation-play-state ορίζει αν το animation είναι ενεργό ή σταματημένο, με τις τιμές 'running' και 'paused' αντίστοιχα. Έτσι η κίνηση μπορεί να παγώσει (και να έχει την ίδια τιμή όση ώρα είναι paused) και να συνεχίσει από εκεί που σταμάτησε όταν ξανά-οριστεί η ιδιότητα σε 'running'. To ίδιο αποτέλεσμα μπορεί να επιτευχθεί αφαιρώντας και προσθέτοντας την ιδιότητα animation που θα περιγράψουμε παρακάτω, οπότε -ίσως- δεν υπάρχει λόγος ύπαρξης του συγκεκριμένου property.

animation

Όπως καλά καταλάβατε, η ιδιότητα animation δρα ως μια συγκεντρωτική ιδιότητα από όλες τις παραπάνω, όπως και τα transition και background properties. Έτσι λοιπόν για να συμπεριλάβετε όλες τις ιδιότητες σε μια δήλωση, μπορείτε να γράψετε:

div { animation: 'bounce' 5s ease-in 0 10 normal; }

DOM events (λίγη Javascript για το τέλος)

Τελευταίο κομμάτι του οδηγού αυτού, είναι τα events που δημιουργούνται κατά την επίδραση ενός CSS Animation. Έτσι λοιπόν η έναρξη, το τέλος καθώς και το τέλος κάθε κύκλου της κίνησης (με τον όρο κίνηση, αναφέρομαι σε κάθε ένα animation-name που έχει οριστεί στο CSS), προκαλούν DOM events. Ta events αυτά φέρουν τον χρόνο που η κίνηση έχει διαρκέσει μέχρι εκείνο το σημείο, ώστε να γίνει γνωστός ο κύκλος του animation ή η φορά (σε περίπτωση εναλλασσόμενης κίνησης) στην προκειμένη στιγμή.

Έτσι λοιπόν έχουμε τρία events, τα animationstart, animationend και animationiteration που προκαλούνται στην αρχή, στο τέλος και στο τέλος κάθε κύκλου αντίστοιχα και περιέχουν το όνομα του animation καθώς και τον χρόνο που τρέχει το animation μέχρι εκείνη την στιγμή, εκτός από το πρώτο event (animationstart) που φυσικά ο χρόνος είναι μηδέν.

Ελπίζω να μην σας μπέρδεψα πολύ με τα παραπάνω, αν και έχω αυτή την αίσθηση. Ακολουθεί ένα demo (Safari 4, Mobile Safari friendly) που ίσως σας ξεδιαλύνει κάποιες απορίες, αλλά σε περίπτωση που θέλετε να ρωτήσετε κάτι, μπορείτε να αφήσετε σχόλιο!

Επίσης μπορείτε να ρίξετε μια ματιά στον κώδικα της σελίδας που σας καλωσορίζει στο Safari 4 που κάνει ευρεία χρήση CSS animations.

Μέχρι τον επόμενο οδηγό, που θα ασχοληθούμε με τα CSS 2D transforms, καλά μπάνια!