CSS αнимάσεις

CSS αнимάσεις

Το CSS μπορεί να επιτύχει την αнимация στοιχείων HTML χωρίς τη χρήση JavaScript ή Flash!

CSS

Σε αυτή τη ενότητα, θα μάθετε τα εξής:

  • @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> από "κόκκινο" σε "κίτρινο":

实例

/* Κώδικας animation */
@keyframes example {
  from {χρώμα-βάθος: κόκκινο;}
  to {χρώμα-βάθος: κίτρινο;}
}
/* Εφαρμόστε την αнимацию σε αυτό το στοιχείο */
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% ολοκλήρωσης της αнимации:

实例

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

亲自试一试

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

实例

/* Κώδικας animation */
@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;}
}
/* Εφαρμογή animation στο στοιχείο */
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

亲自试一试

Καθυστέρηση animation

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

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

实例

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

亲自试一试

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

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

实例

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

亲自试一试

Ρύθμιση του αριθμού των φορών που θα τρέξει η animation

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

Η παρακάτω παράδειγμα θα τρέξει την animation 3 φορές πριν σταματήσει:

实例

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

亲自试一试

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

实例

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

亲自试一试

Αναστροφή ή εναλλασσόμενη τροχιά animation

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

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

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

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

实例

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

亲自试一试

Η παρακάτω παράδειγμα χρησιμοποιεί την τιμή "alternate" για να τρέξει την animation μπροστά και μετά πίσω:

实例

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" για να τρέξει την αニματίαation πίσω και μετά μπροστά:

实例

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) - Χρησιμοποιήστε τις τιμές που καθορίζετε στον τριγωνικό τύποBezier

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

实例

#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 Ορίζει την ταχύτητα της κίνησης της αニμασιών.