Ιδιότητα 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, που απενεργοποιεί το κινούμενο σχέδιο εντελώς. Αυτή η τιμή είναι η προεπιλεγμένη τιμή.

Σύνταξη

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

Παράδειγμα

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

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

@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;
}

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

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

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

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

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

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

Δείτε επίσης

την εντολή @keyframes,
που ορίζει τα βασικά καρέ ενός κινούμενου σχεδίου
τις ομαλές μεταβάσεις transition, που αντιπροσωπεύουν ένα κινούμενο σχέδιο όταν το ποντίκι περνάει πάνω από ένα στοιχείο