Ιδιότητα animation-direction

Η ιδιότητα animation-direction ορίζει την κατεύθυνση της κίνησης. Από προεπιλογή, η κίνηση επαναλαμβάνεται μόνο 1 φορά και μετά επιστρέφει στην αρχική της κατάσταση, έπειτα, αν έχει οριστεί καθυστέρηση animation-delay, θα περιμένει τον καθορισμένο χρόνο και μετά ο κύκλος θα ξεκινήσει από την αρχή.

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

Μπορεί επίσης να οριστεί η ακόλουθη συμπεριφορά: η κίνηση θα φτάσει στο ακραίο σημείο και θα επιστρέψει πίσω (όπως στο transition). Δείτε την περιγραφή παρακάτω.

Σύνταξη

cssεπιλογέας {
  animation-direction: normal | reverse | alternate | alternate-reverse;
}

Τιμές

Προεπιλεγμένη τιμή: normal.

Παράδειγμα

Τώρα το στοιχείο θα κινείται προς τη μία κατεύθυνση, και μετά θα επιστρέφει πίσω, αφού έχει οριστεί η τιμή alternate. Ενώ animation-duration έχει τιμή 3 δευτερόλεπτα και αυτό σημαίνει ότι οι μετακινήσεις "προς τα εκεί" και "πίσω" θα διαρκούν 3 δευτερόλεπτα η καθεμία:

html<div id="elem"></div>

css@keyframes move {
  from {
    margin-left: 0;
  }
  to {
    margin-left: 400px;
  }
}

#elem {
  animation-direction: alternate;
  animation-duration: 3s;
  animation-name: move;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

Результат:

Παράδειγμα

Τώρα το στοιχείο θα κινείται στην αντίστροφη κατεύθυνση (πρέπει από αριστερά προς τα δεξιά, αλλά θα είναι από δεξιά προς τα αριστερά):

html<div id="elem"></div>

css@keyframes move {
  from {
    margin-left: 0;
  }
  to {
    margin-left: 400px;
  }
}
      
#elem {
  animation-direction: reverse;
  animation-duration: 3s;
  animation-name: move;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

Результат:

Παράδειγμα

Τώρα το στοιχείο θα κινείται μπρος-πίσω, αλλά στην αντίστροφη κατεύθυνση (πρέπει να ξεκινά από αριστερά, αλλά θα ξεκινά από δεξιά):

html<div id="elem"></div>

css@keyframes move {
  from {
    margin-left: 0;
  }
  to {
    margin-left: 400px;
  }
}

#elem {
  animation-direction: alternate-reverse;
  animation-duration: 3s;
  animation-name: move;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

Результат:

Δείτε επίσης