CSS Αнимάσεις

CSS Αнимάσεις

Το CSS μπορεί να επιτρέψει την αニμασία των στοιχείων HTML χωρίς τη χρήση JavaScript ή Flash!

CSS

Σε αυτό το κεφάλαιο, θα μάθετε τα εξής attributes:

  • @keyframes
  • animation-name
  • animation-duration
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-timing-function
  • animation-fill-mode
  • animation

Υποστήριξη περιηγητών για την αニμασία

Οι αριθμοί στη διάταξη δείχνουν την πρώτη έκδοση του περιηγητή που υποστηρίζει πλήρως αυτήν την ιδιότητα.

ιδιότητες Chrome IE Firefox Safari Opera
@keyframes 43.0 10.0 16.0 9.0 30.0
animation-name 43.0 10.0 16.0 9.0 30.0
animation-duration 43.0 10.0 16.0 9.0 30.0
animation-delay 43.0 10.0 16.0 9.0 30.0
animation-iteration-count 43.0 10.0 16.0 9.0 30.0
animation-direction 43.0 10.0 16.0 9.0 30.0
animation-timing-function 43.0 10.0 16.0 9.0 30.0
animation-fill-mode 43.0 10.0 16.0 9.0 30.0
animation 43.0 10.0 16.0 9.0 30.0

Τι είναι η αニμασία CSS;

Οι αニμασίες επιτρέπουν στο στοιχείο να αλλάζει σταδιακά από ένα στυλ σε ένα άλλο.

Μπορείτε να αλλάξετε οποιοδήποτε αριθμό ιδιοτήτων CSS.

Για να χρησιμοποιήσετε τις αニμασίες CSS, πρέπει πρώτα να καθορίσετε μερικά κλειδιά.

Οι κλειδιά περιέχουν το στυλ του στοιχείου κατά την συγκεκριμένη στιγμή.

@keyframes κανόνες

Αν στο @keyframes Οι κανόνες ορίζουν τα CSS στυλ που θα αλλάξουν σταδιακά από το τρέχον στυλ στο νέο στυλ σε συγκεκριμένο χρόνο.

Για να γίνει η αニμασία λειτουργική, πρέπει να συνδεθεί σε ένα στοιχείο.

Η παρακάτω παράδειγμα θα συνδέσει την αニμασία "example" στο στοιχείο <div>. Η αニμασία θα διαρκέσει 4 δευτερόλεπτα, ενώ το χρωματικό φόντο του στοιχείου <div> θα αλλάξει από "red" σε "yellow":

παράδειγμα

/* Κώδικας αニματίαςσης */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
/* Εφαρμόστε την αニμασία σε αυτό το στοιχείο */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

δοκιμάστε το αμέσως

Σημείωση:animation-duration Η ιδιότητα καθορίζει πόσο χρόνο απαιτείται για την ολοκλήρωση της αニμασίας. animation-duration Αν δεν οριστεί η ιδιότητα, η αニμασία δεν θα εκτελεστεί, επειδή η προεπιλεγμένη τιμή είναι 0s (0 δευτερόλεπτα).

Στο παραπάνω παράδειγμα, χρησιμοποιώντας τους όρους κλειδιά "from" και "to" (ολοκληρωμένες τιμές 0% (시τισμός) και 100% (ολοκλήρωση)), ρύθμισαν πότε θα αλλάξει το στυλ.

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

Η παρακάτω παράδειγμα θα αλλάξει τον χρωματικό φόντο του στοιχείου <div> κατά 25%, 50% και 100% ολοκλήρωσης της αニμασιών:

παράδειγμα

/* Κώδικας αニματίαςσης */
@keyframes example {
  0%   {background-color: red;}
  25% {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}
/* Εφαρμογή της αニματίαςσης στο στοιχείο */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

δοκιμάστε το αμέσως

Η παρακάτω παράδειγμα αλλάζει το χρώμα του παρασκηνίου και τη θέση του στοιχείου <div> όταν η αニματίαση ολοκληρώνεται στο 25%, στο 50% και στο 100%:

παράδειγμα

/* Κώδικας αニματίαςσης */
@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
/* Εφαρμογή της αニματίαςσης στο στοιχείο */
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

δοκιμάστε το αμέσως

Καθυστέρηση της αニματίαςσης

animation-delay Η ιδιότητα καθορίζει την καθυστέρηση πριν ξεκινήσει η αニματίαση.

Η παρακάτω παράδειγμα έχει 2 δευτερόλεπτα καθυστέρηση πριν ξεκινήσει η αニματίαση:

παράδειγμα

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: 2s;
}

δοκιμάστε το αμέσως

Αποδεκτές είναι και οι αρνητικές τιμές. Αν χρησιμοποιηθούν αρνητικές τιμές, η αニματίαση θα ξεκινήσει να παίζει, όπως αν είχε παίξει για N δευτερόλεπτα.

Στο παρακάτω παράδειγμα, η αニματίαση θα ξεκινήσει να παίζει, όπως αν είχε παίξει για 2 δευτερόλεπτα:

παράδειγμα

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: -2s;
}

δοκιμάστε το αμέσως

Ρύθμιση του αριθμού των φορών εκτέλεσης της αニματίαςσης

animation-iteration-count Η ιδιότητα καθορίζει τον αριθμό των φορών που η αニματίαση θα εκτελεστεί.

Η παρακάτω παράδειγμα εκτελεί την αニματίαση 3 φορές πριν σταματήσει:

παράδειγμα

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 3;
}

δοκιμάστε το αμέσως

Η παρακάτω παράδειγμα χρησιμοποιεί τη τιμή "infinite" για να κάνει την αニματίαση να συνεχίζεται για πάντα:

παράδειγμα

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

δοκιμάστε το αμέσως

Αναστροφή ή εναλλαγή της αニματίαςσης

animation-direction Η ιδιότητα καθορίζει αν η αニματίαση θα παίξει προς τα εμπρός, προς τα πίσω ή θα εναλλάσσεται.

animation-direction Η ιδιότητα μπορεί να αποδεχτεί τις ακόλουθες τιμές:

  • normal - Η αニματίαση παίζει κανονικά (προς τα εμπρός). Προεπιλεγμένη τιμή
  • reverse - Η αニματίαση παίζει προς τα πίσω (κατά την αντίθετη κατεύθυνση)
  • alternate - Η αニματίαση παίζει προς τα εμπρός και μετά προς τα πίσω
  • alternate-reverse - Η αニματίαση παίζει προς τα πίσω και μετά προς τα εμπρός

Το παρακάτω παράδειγμα εκτελεί την αニματίαση προς τα πίσω (κατά την αντίθετη κατεύθυνση):

παράδειγμα

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-direction: reverse;
}

δοκιμάστε το αμέσως

Η παρακάτω παράδειγμα χρησιμοποιεί τη τιμή "alternate" για να εκτελεί την αニματίαση προς τα εμπρός και μετά προς τα πίσω:

παράδειγμα

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate;
}

δοκιμάστε το αμέσως

Η παρακάτω παράδειγμα χρησιμοποιεί τη τιμή "alternate-reverse" για να εκτελεί την αニματίαση προς τα πίσω και μετά προς τα εμπρός:

παράδειγμα

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate-reverse;
}

δοκιμάστε το αμέσως

Ορίζει την καμπύλη ταχύτητας της αニματιώντας

animation-timing-function Η ιδιότητα ορίζει την καμπύλη ταχύτητας της αニματιώντας.

animation-timing-function Η ιδιότητα μπορεί να αποδεχτεί τις ακόλουθες τιμές:

  • ease - Ορίζει την αニματιώντας που ξεκινά αργά, μετά γρήγορα και τελειώνει αργά (προεπιλεγμένη)
  • linear - Ορίζει την αニματιώντας όπου η ταχύτητα είναι η ίδια από την έναρξη μέχρι το τέλος
  • ease-in - Ορίζει την αニματιώντας που ξεκινά πιο αργά
  • ease-out - Ορίζει την αニματιώντας που τελειώνει πιο αργά
  • ease-in-out - Ορίζει την αニματιώντας που ξεκινά και τελειώνει πιο αργά
  • cubic-bezier(n,n,n,n) - Εκτελέστε τις τιμές που ορίζετε στον τρισδιάστατο βεζιέρειο συνάρτηση

Τα παρακάτω παραδείγματα δείχνουν μερικές από τις διαφορετικές καμπύλες ταχύτητας που μπορούν να χρησιμοποιηθούν:

παράδειγμα

#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

δοκιμάστε το αμέσως

Ορίζει το μοτίβο γεμίματος της αニματιώντας

Οι αニματιώντας του CSS δεν επηρεάζουν το στοιχείο πριν από την εκτέλεση του πρώτου κρίσιμου σημείου ή μετά την εκτέλεση του τελευταίου κρίσιμου σημείου.animation-fill-mode η ιδιότητα μπορεί να καλύπτει αυτό το comportment.

Κατά τη διάρκεια της μη εκτέλεσης της αニματιώντας (πριν από την έναρξη, μετά το τέλος, ή και τα δύο),animation-fill-mode Η ιδιότητα ορίζει το στυλ του στόχου στοιχείου.

Η ιδιότητα animation-fill-mode μπορεί να αποδεχτεί τις ακόλουθες τιμές:

  • none - Προεπιλεγμένη τιμή. Η αニματιώντας δεν θα εφαρμόσει κανένα στυλ στο στοιχείο πριν ή μετά την εκτέλεση.
  • forwards - Το στοιχείο θα διατηρήσει τις τιμές των στυλ που ορίζονται από την τελευταία κρίσιμη χρονική στιγμή (βασισμένο στο animation-direction και στο animation-iteration-count).
  • backwards - Το στοιχείο θα αποκτήσει τις τιμές των στυλ που ορίζονται από την πρώτη κρίσιμη χρονική στιγμή (βασισμένο στο animation-direction) και θα διατηρήσει αυτές τις τιμές κατά τη διάρκεια της καθυστέρησης της αニματιώντας.
  • both - Η αニματιώντας θα ακολουθεί ταυτόχρονα τους κανόνες προς τα εμπρός και προς τα πίσω, επεκτάνοντας τις ιδιότητες της αニματιώντας στους δύο κατευθύνσεις.

Η παρακάτω παράδειγμα επιτρέπει στο στοιχείο <div> να διατηρήσει τις τιμές των στυλ από την τελευταία κρίσιμη χρονική στιγμή στο τέλος της αニματιώντας:

παράδειγμα

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

δοκιμάστε το αμέσως

Το παρακάτω παράδειγμα κάνει το στοιχείο <div> να πάρει τη διαμόρφωση της πρώτης κρίσιμης κατεύθυνσης πριν ξεκινήσει η κίνηση (κατά τη διάρκεια της καθυστέρησης της κίνησης):

παράδειγμα

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: backwards;
}

δοκιμάστε το αμέσως

Το παρακάτω παράδειγμα κάνει το στοιχείο <div> να πάρει τη διαμόρφωση της πρώτης κρίσιμης κατεύθυνσης πριν ξεκινήσει η κίνηση και να τη διατηρήσει στο τέλος της κίνησης:

παράδειγμα

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: both;
}

δοκιμάστε το αμέσως

σύντομες ιδιότητες κίνησης

Στο παρακάτω παράδειγμα χρησιμοποιούνται έξι ιδιότητες κίνησης:

παράδειγμα

div {
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

δοκιμάστε το αμέσως

χρησιμοποιώντας τη συντομευμένη έκδοση animation Η ιδιότητα μπορεί επίσης να επιτύχει την ίδια κίνηση όπως στο παρακάτω παράδειγμα:

παράδειγμα

div {
  animation: example 5s linear 2s infinite alternate;
}

δοκιμάστε το αμέσως

ιδιότητες κίνησης CSS

Η παρακάτω τаблицή περιλαμβάνει τις οδηγίες @keyframes και όλες τις ιδιότητες κίνησης CSS:

ιδιότητες περιγραφή
@keyframes καθορίζει τον τύπο της κίνησης.
animation θεωρείται συντομευμένη έκδοση όλων των ιδιοτήτων κίνησης.
animation-delay καθορίζει την καθυστέρηση πριν ξεκινήσει η κίνηση.
animation-direction καθορίζει αν η κίνηση παίζει προς τα εμπρός, προς τα πίσω ή εναλλασσόμενα.
animation-duration καθορίζει τον χρόνο που θα χρειαστεί για να ολοκληρωθεί μια περίοδος της κίνησης.
animation-fill-mode καθορίζει τον τύπο του στυλ του στοιχείου όταν δεν παίζει κίνηση (πριν ξεκινήσει, μετά το τέλος, ή και τα δύο)
animation-iteration-count καθορίζει τον αριθμό των φορών που θα παίξει η κίνηση.
animation-name καθορίζει το όνομα της κίνησης @keyframes.
animation-play-state Καθορίζει αν η αнимάση θα εκτελεστεί ή θα σταματήσει.
animation-timing-function Καθορίζει την ταχύτητα της κίνησης της αニμασιών.