Ιδιότητα animation-direction

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

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

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

Σύνταξη

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

Τιμές

Τιμή	Περιγραφή
`reverse`	Η κίνηση θα εκτελείται στην αντίστροφη κατεύθυνση.
`alternate`	Η κίνηση θα εκτελείται πρώτα στην κανονική, και μετά στην αντίστροφη κατεύθυνση (όπως το transition).
`alternate-reverse`	Η κίνηση θα εκτελείται από την τελική θέση προς την αρχική και αντίστροφα. Ουσιαστικά είναι οι τιμές `alternate` και `reverse` σε ένα.
`normal`	Η κίνηση θα εκτελείται από την αρχή προς το τέλος, και μετά το τέλος της θα πηδάει απότομα στην αρχική θέση.

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

Παράδειγμα

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

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

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

Παράδειγμα

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

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

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

Παράδειγμα

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

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

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

Δείτε επίσης

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