Egenskapen animation-direction

Egenskapen animation-direction angir retningen på animasjonen. Som standard vil animasjonen gjenta seg kun 1 gang og deretter gå tilbake til utgangstilstanden, deretter, hvis forsinkelse er angitt animation-delay, vil den vente i den angitte tiden og deretter vil syklusen starte på nytt.

Denne egenskapen lar deg endre denne oppførselen, for eksempel slik at animasjonen etter avslutning forblir der den sluttet, og ikke hopper tilbake til startposisjonen.

Du kan også angi en slik oppførsel: animasjonen går til ekstrempunktet og returnerer tilbake (som i transition). Se beskrivelsen nedenfor.

Syntaks

velger {
	animation-direction: normal | reverse | alternate | alternate-reverse;
}

Verdier

Verdi	Beskrivelse
`reverse`	Animasjonen vil spilles av i omvendt retning.
`alternate`	Animasjonen vil spilles av først i fremoverretning, og deretter i omvendt retning (som transition).
`alternate-reverse`	Animasjonen vil spilles av fra slutttilstand til starttilstand og tilbake. I hovedsak er dette verdiene `alternate` og `reverse` i en kombinasjon.
`normal`	Animasjonen vil spilles av fra start til slutt, og etter avslutning hoppe brått tilbake til startposisjonen.

Standardverdi: normal.

Eksempel

Nå vil elementet bevege seg i én retning, og deretter returnere tilbake, siden verdien alternate er angitt. Samtidig har animation-duration verdien 3 sekunder, og det betyr at forflytningene "fram" og "tilbake" vil vare i 3 sekunder hver:

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

Eksempel

Nå vil elementet bevege seg i omvendt retning (skal egentlig fra venstre til høyre, men vil nå fra høyre til venstre):

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

Eksempel

Nå vil elementet bevege seg fram og tilbake, men i omvendt retning (skal starte til venstre, men vil starte til høyre):

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

Se også

egenskapen animation-name,
som angir navnet på animasjonen
egenskapen animation-duration,
som angir varigheten på animasjonen
egenskapen animation-delay,
som angir forsinkelsen før animasjonen utføres
egenskapen animation-timing-function,
som angir hastigheten på animasjonen
egenskapen animation-iteration-count,
som angir antall iterasjoner av animasjonen
egenskapen animation-fill-mode,
som angir tilstanden til animasjonen
egenskapen animation-play-state,
som lar deg sette animasjonen på pause
egenskapen animation,
som er en forkortelse for animasjoner
kommandoen @keyframes,
som angir nøkkelrammene for animasjonen
jevne overganger transition, som er en animasjon ved å peke på et element