Ιδιότητα animation-name

Η ιδιότητα animation-name ορίζει το όνομα της κινούμενης εικόνας (ή των κινούμενων εικόνων) που θα εφαρμοστεί σε αυτό το στοιχείο. Το όνομα της κινούμενης εικόνας πρέπει να είναι το ίδιο με αυτό που ορίζεται κατά τον ορισμό των βασικών κadρων @keyframes.

Σύνταξη

επιλογέας {
	animation-name: όνομα κινούμενης εικόνας;
}

Παράδειγμα

Σε αυτό το παράδειγμα, η κινούμενη εικόνα έχει όνομα move:

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

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

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

Δείτε επίσης

η ιδιότητα animation-duration,
που ορίζει τη διάρκεια της κινούμενης εικόνας
η ιδιότητα animation-delay,
που ορίζει την καθυστέρηση πριν από την εκτέλεση της κινούμενης εικόνας
η ιδιότητα animation-timing-function,
που ορίζει την ταχύτητα εκτέλεσης της κινούμενης εικόνας
η ιδιότητα animation-iteration-count,
που ορίζει τον αριθμό των επαναλήψεων της κινούμενης εικόνας
η ιδιότητα animation-direction,
που ορίζει την κατεύθυνση της κινούμενης εικόνας
η ιδιότητα animation-fill-mode,
που ορίζει την κατάσταση της κινούμενης εικόνας
η ιδιότητα animation-play-state,
που επιτρέπει τη διακοπή της κινούμενης εικόνας
η ιδιότητα animation,
που αποτελεί συντομογραφία για κινούμενες εικόνες
την εντολή @keyframes,
που ορίζει τα βασικά καδρα της κινούμενης εικόνας
ομαλές μεταβάσεις transition, που αντιπροσωπεύουν κινούμενη εικόνα όταν το ποντίκι περνάει πάνω από ένα στοιχείο