Ιδιότητα animation

Η ιδιότητα animation είναι μια συντομογραφική ιδιότητα για κινούμενα σχέδια, επιτρέπει τον ορισμό όλων των ιδιοτήτων για κινούμενα σχέδια ταυτόχρονα: animation-name, animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state.

Η σειρά των τιμών δεν έχει σημασία, ο χρόνος εκτέλεσης του κινούμενου σχεδίου animation-duration πρέπει υποχρεωτικά να μπει πριν από την καθυστέρηση animation-delay. Υποχρεωτικές είναι μόνο οι ιδιότητες animation-name και animation-duration.

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

Σύνταξη

cssεπιλογέας {
  animation: τιμές;
}

Παράδειγμα

Σε αυτό το παράδειγμα, θα υπάρχει καθυστέρηση 3 δευτερολέπτων πριν από το κινούμενο σχέδιο (πριν από κάθε νέα αναπαραγωγή), και στη συνέχεια το κινούμενο σχέδιο θα αναπαράγεται για 6 δευτερόλεπτα:

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

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

#elem {
  animation: move 6s infinite 3s linear;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

Результат:

Παράδειγμα . Πιθανά προβλήματα

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

css@keyframes reverse {
  from {
    left: 0;
  }
  to {
    left: 300px;
  }
}

Παρατηρήστε, χρησιμοποιώ το όνομα κινούμενου σχεδίου reverse. Με την πρώτη ματιά, όλα είναι καλά, αλλά το κινούμενο σχέδιο δεν λειτουργεί, επειδή το reverse είναι μια έγκυρη λέξη-κλειδί για την ιδιότητα animation-direction.

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

Ανάμεσα στις λέξεις-κλειδιά τιμών της animation-direction, που "σπάνε" τα κινούμενα σχέδια, αξίζει να συμπεριληφθούν και οι λέξεις-κλειδιά που σχετίζονται με τις συναρτήσεις χρονισμού, καθώς και το infinite, alternate, running, paused και ούτω καθεξής.

Δείτε επίσης