Ιδιότητα animation-fill-mode

Η ιδιότητα animation-fill-mode καθορίζει σε ποια θέση να σταματάει η κινούμενη εικόνα μετά το τέλος. Από προεπιλογή η κινούμενη εικόνα επιστρέφει στην αρχική της τιμή και αυτό μπορεί να μην φαίνεται πολύ ωραίο.

Σύνταξη

επιλογέας {
	animation-fill-mode: backwards | forwards | both | none;
}

Τιμές

Τιμή	Περιγραφή
`none`	Εάν έχει οριστεί καθυστέρηση κινούμενης εικόνας - τότε κατά τη διάρκεια της καθυστέρησης το στοιχείο θα παραμένει στη θέση του, και μετά με άλμα θα μεταβεί στο `0%` καρέ. Μετά το τέλος της κινούμενης εικόνας το στοιχείο δεν θα παραμείνει στην κατάσταση, όπου σταμάτησε, αλλά θα μεταπηδήσει στην αρχική κατάσταση.
`backwards`	Αναγκάζει το στοιχείο να κινηθεί μετά τη φόρτωση της σελίδας προς το `0%` καρέ, ακόμα και εάν έχει οριστεί καθυστέρηση `animation-delay`, και να παραμείνει εκεί, μέχρι να ξεκινήσει η κινούμενη εικόνα. Μετά το τέλος της κινούμενης εικόνας το στοιχείο δεν θα παραμείνει στην κατάσταση, όπου σταμάτησε, αλλά θα μεταπηδήσει στην αρχική κατάσταση.
`forwards`	Καθορίζει στο πρόγραμμα περιήγησης, ότι μετά το τέλος της κινούμενης εικόνας το στοιχείο θα παραμείνει στην κατάσταση, όπου σταμάτησε.
`both`	Περιλαμβάνει τα backwards και forwards - μετά τη φόρτωση της σελίδας το στοιχείο θα οριστεί στο `0%` καρέ, και μετά το τέλος της κινούμενης εικόνας το στοιχείο θα παραμείνει εκεί, όπου σταμάτησε.

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

Παράδειγμα . Τιμή none

Σε αυτό το παράδειγμα margin-left έχει οριστεί στην τιμή 300px για το στοιχείο, και για το πρώτο καρέ της κινούμενης εικόνας - σε 0px. Εφόσον δεν υπάρχει καθυστέρηση animation-delay, το στοιχείο μετά τη φόρτωση της σελίδας θα γίνει σε 0px, και όχι σε 300px. Εκτός από αυτό, η κινούμενη εικόνα μετά το τέλος θα μεταπηδά στην αρχική τιμή:

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

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

#elem {
	margin-left: 300px;
	animation-fill-mode: none;
	animation-delay: 0s;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Παράδειγμα . Τιμή none

Σε αυτό το παράδειγμα margin-left έχει οριστεί στην τιμή 300px για το στοιχείο, και για το πρώτο καρέ της κινούμενης εικόνας - σε 0px. Επίσης για το στοιχείο έχει οριστεί καθυστέρηση animation-delay σε 3 δευτερόλεπτα, επομένως το στοιχείο μετά τη φόρτωση της σελίδας θα γίνει σε 300px, και όχι σε 0px, και θα παραμείνει εκεί 3 δευτερόλεπτα μετά την έναρξη της κινούμενης εικόνας και μετά με άλμα θα μεταβεί σε 0px - και η κινούμενη εικόνα θα ξεκινήσει από εκεί. Εκτός από αυτό, η κινούμενη εικόνα μετά το τέλος θα μεταπηδά στην αρχική τιμή:

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

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

#elem {
	margin-left: 300px;
	animation-fill-mode: none;
	animation-delay: 0s;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Παράδειγμα . Τιμή backwards

Σε αυτό το παράδειγμα margin-left έχει οριστεί στην τιμή 300px για το στοιχείο, και για το πρώτο καρέ της κινούμενης εικόνας - σε 0px. Επίσης για το στοιχείο έχει οριστεί animation-fill-mode στην τιμή backwards, επομένως το στοιχείο μετά τη φόρτωση της σελίδας θα γίνει σε 0px, και όχι σε 300px, όπως συνέβαινε για το animation-fill-mode στην τιμή none. Εκτός από αυτό, η κινούμενη εικόνα μετά το τέλος θα μεταπηδά στην αρχική τιμή:

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

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

#elem {
	margin-left: 300px;
	animation-fill-mode: backwards;
	animation-delay: 0s;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Παράδειγμα . Τιμή none και αριθμός επαναλήψεων ίσος με 1

Σε αυτό το παράδειγμα margin-left έχει οριστεί στην τιμή 300px για το στοιχείο, και για το πρώτο καρέ της κινούμενης εικόνας - σε 0px. Επίσης για το στοιχείο έχει οριστεί καθυστέρηση animation-delay σε 3 δευτερόλεπτα, επομένως το στοιχείο μετά τη φόρτωση της σελίδας θα γίνει σε 300px, και όχι σε 0px, και θα παραμείνει εκεί 3 δευτερόλεπτα μετά την έναρξη της κινούμενης εικόνας και μετά με άλμα θα μεταβεί σε 0px - και η κινούμενη εικόνα θα ξεκινήσει από εκεί. Εφόσον το animation-fill-mode έχει οριστεί στην τιμή none, τότε μετά την αναπαραγωγή της κινούμενης εικόνας το στοιχείο θα επιστρέψει στην αρχική τιμή:

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

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

#elem {
	margin-left: 300px;
	animation-fill-mode: none;
	animation-delay: 3s;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: 1;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Παράδειγμα . Τιμή forwards και αριθμός επαναλήψεων ίσος με 1

Σε αυτό το παράδειγμα το animation-fill-mode έχει οριστεί στην τιμή forwards, και ο αριθμός επαναλήψεων της κινούμενης εικόνας - σε 1. Μετά την αναπαραγωγή της κινούμενης εικόνας το στοιχείο θα παραμείνει στην θέση, όπου τελείωσε η κινούμενη εικόνα, και δεν θα μεταπηδήσει στο σημείο εκκίνησης.

Εκτός από αυτό, το margin-left έχει οριστεί στην τιμή 300px για το στοιχείο, και για το πρώτο καρέ της κινούμενης εικόνας - σε 0px. Επίσης για το στοιχείο έχει οριστεί καθυστέρηση animation-delay σε 3 δευτερόλεπτα, επομένως το στοιχείο μετά τη φόρτωση της σελίδας θα γίνει σε 300px, και όχι σε 0px, και θα παραμείνει εκεί 3 δευτερόλεπτα μετά την έναρξη της κινούμενης εικόνας, και μετά με άλμα θα μεταβεί σε 0px - και η κινούμενη εικόνα θα ξεκινήσει από εκεί:

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

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

#elem {
	margin-left: 300px;
	animation-fill-mode: forwards;
	animation-delay: 3s;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: 1;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Παράδειγμα . Τιμή both και αριθμός επαναλήψεων ίσος με 1

Σε αυτό το παράδειγμα το animation-fill-mode έχει οριστεί στην τιμή both, και ο αριθμός επαναλήψεων της κινούμενης εικόνας - σε 1. Μετά τη φόρτωση της σελίδας το στοιχείο θα βρίσκεται στο πρώτο καρέ της κινούμενης εικόνας (σε 0px, και όχι σε 300px), και μετά την αναπαραγωγή της κινούμενης εικόνας το στοιχείο θα παραμείνει στην θέση, όπου τελείωσε η κινούμενη εικόνα, και δεν θα μεταπηδήσει στο σημείο εκκίνησης:

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

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

#elem {
	margin-left: 300px;
	animation-fill-mode: both;
	animation-delay: 3s;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: 1;
	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-direction,
που ορίζει την κατεύθυνση της κινούμενης εικόνας
ιδιότητα animation-play-state,
που επιτρέπει να σταματήσει προσωρινά η κινούμενη εικόνα
ιδιότητα animation,
που αποτελεί συντομογραφία για κινούμενες εικόνες
εντολή @keyframes,
που ορίζει τα βασικά καρέ της κινούμενης εικόνας
ομαλές μεταβάσεις transition, που αποτελούν κινούμενη εικόνα όταν το ποντίκι περνάει πάνω από το στοιχείο