You are currently viewing CSS transitions

CSS transitions

Χρησιμοποιώντας μεταβάσεις (transitions) μπορούμε να αλλάξουμε μια ιδιότητα (property) CSS σταδιακά και όχι στιγμιαία όπως θα συνέβαινε διαφορετικά. Αν θέλουμε, για παράδειγμα, να αλλάξουμε το χρώμα ενός στοιχείου όταν το ποντίκι βρίσκεται πάνω του θα χρησιμοποιήσουμε τη pseudo-class :hover και θα γράψουμε:

div:hover {color: #fff;}

Στην περίπτωση αυτή η αλλαγή του χρώματος συμβαίνει ακαριαία κάθε φορά που το ποντίκι περνάει πάνω από το div. Αν χρησιμοποιήσουμε όμως transitions οι αλλαγές συμβαίνουν βαθμιαία και διαρκούν για ένα χρονικό διάστημα που ορίζουμε εμείς οι ίδιοι. Στο παρακάτω παράδειγμα μπορείτε να δείτε τη διαφορά:

See the Pen With and without transition.. by WebFocus (@athinats) on CodePen.

Στο δεύτερο κουτί που χρησιμοποιούμε transition χρειάζεται 1 δευτερόλεπτο για να αλλάξει το χρώμα από κόκκινο σε μπλε.


Κάθε transition έχει 4 ιδιότητες/παραμέτρους (transition properties) που χρειάζεται να ορίσουμε:

div {
transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
}

 

transition-property

Καθορίζει σε ποια ιδιότητα (CSS property) θα εφαρμοστεί το transition. Αν η ιδιότητα δεν υποστηρίζεται, τότε η μετάβαση συμβαίνει ακαριαία ως συνήθως. Οι ιδιότητες (CSS properties) στις οποιές μπορούν να εφαρμοστούν transitions φαίνονται εδώ.

transition-duration

Καθορίζει τη διάρκεια της μετάβασης. Η τιμή δίνεται σε second (s) ή millisecond (ms) και μπορεί να είναι δεκαδικός αριθμός (.5s για παράδειγμα). Μπορούμε να ορίσουμε μια τιμή για όλες τις ιδιότητες ή πολλαπλές τιμές ώστε κάθε ιδιότητα να ολοκληρώσει τη μετάβαση σε διαφορετικό χρονικό διάστημα.

transition-timing-function

Καθορίζει τη συνάρτηση με βάση την οποία υπολογίζονται οι ενδιάμεσες τιμές της μετάβασης. Οι συνηθέστερες τιμές αυτής της παραμέτρου είναι: ease, linear, ease-in, ease-out.

transition-delay

Καθορίζει το χρόνο που χρειάζεται να περάσει μέχρι να ξεκινήσει η μετάβαση. Κι εδώ η τιμή δίνεται σε second (s) ή millisecond (ms) και μπορεί να είναι δεκαδικός αριθμός.

Οι 2 ιδιότητες (transition properties) που πρέπει υποχρεωτικά να ορίσουμε είναι:
transition-property, δηλαδή σε ποια CSS property θα εφαρμοστεί η μετάβαση και
transition-duration, δηλαδή τη διάρκεια της μετάβασης. Αν δεν ορίσουμε τη διάρκεια τότε η μετάβαση θα συμβεί ακαριαία γιατί η προκαθορισμένη τιμή είναι 0.

Όταν η μετάβαση αφορά πολλαπλές CSS properties τότε τις ξεχωρίζουμε με κόμμα, όπως φαίνεται εδώ:

div {
  transition: background 0.5s ease,
              border-radious 1s linear;
}

‘Οταν θέλουμε να αλλάξουμε περισσότερες από μια ιδιότητες στον ίδιο χρόνο και με τον ίδιο τρόπο, τότε μπορούμε να χρησιμοποιήσουμε την τιμή “all”, όπως φαίνεται παρακάτω:

div {
  transition: all 0.5s ease;
  background: red;
  border-radious: 6px;
}
div:hover {
  background: blue;
  border-radious: 50%;
}

Εδώ η μετάβαση θα εφαρμοστεί και στις 2 ιδιότητες – background και border-radius – αφού χρησιμοποιείται η τιμή “all”.

Να συμπληρώσουμε ότι η ιδιότητα transition χρησιμοποιείται για λόγους συντομίας. Θα μπορούσαμε να ορίσουμε κάθε μια ιδιότητα (transition property) ξεχωριστά, όπως φαίνεται παρακάτω, όμως ο τρόπος αυτός καλό είναι να αποφεύγεται αν θέλουμε να έχουμε μικρότερο και πιο ευανάγνωστο κώδικα.

div {
  background: red;
  border-radius: 6px
  transition-property: background, border-radius;
  transition-duration: .5s, 1s;
  transition-timing-function: linear, ease-in;
  transition-delay: 0s, 1s;
}
div:hover {
  background: blue;
  border-radius: 50%;
}

Τέλος είναι σημαντικό να χρησιμοποιούμε vendor prefixes για λόγους συμβατότητας με όλους τους browsers, όπως φαίνεται παρακάτω. Η κανονική σύνταξη γράφεται πάντα τελευταία.

div {
    -webkit-transition: background 500ms ease-out 1s;
    -moz-transition: background 500ms ease-out 1s;
    -o-transition: background 500ms ease-out 1s;
    transition: background 500ms ease-out 1s;
}