Egenskaben animation-direction

Egenskaben animation-direction angiver animationsretningen. Som standard gentages animationen kun 1 gang og vender derefter tilbage til udgangstilstanden, herefter, hvis der er angivet en forsinkelse animation-delay, venter den den angivne tid, og derefter starter cyklussen forfra.

Denne egenskab gør det muligt at ændre denne adfærd, for eksempel sådan at animationen efter afslutningen forbliver der, hvor den sluttede, i stedet for at springe tilbage til startpositionen.

Det er også muligt at angive sådan en adfærd: animationen når til yderpunktet og vender tilbage (som i transition). Se beskrivelsen nedenfor.

Syntaks

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

Værdier

Værdi	Beskrivelse
`reverse`	Animationen afspilles i omvendt retning.
`alternate`	Animationen afspilles først i normal retning, og derefter i omvendt retning (som transition).
`alternate-reverse`	Animationen afspilles fra slutpositionen til startpositionen og tilbage. I bund og grund er dette værdierne `alternate` og `reverse` i én samlet.
`normal`	Animationen afspilles fra start til slut, og efter afslutningen springer den tilbage til startpositionen.

Standardværdi: normal.

Eksempel

Nu vil elementet bevæge sig i den ene retning, og derefter vende tilbage, da der er angivet værdien alternate. Samtidig har animation-duration værdien 3 sekunder, hvilket betyder, at bevægelserne "derhen" og "tilbage" vil vare 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

Nu vil elementet bevæge sig i den modsatte retning (skulle fra venstre mod højre, men vil fra højre mod 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

Nu vil elementet bevæge sig frem og tilbage, men i omvendt retning (skulle starte til venstre, men vil starte til højre):

<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å

egenskaben animation-name,
som angiver animationens navn
egenskaben animation-duration,
som angiver animationens varighed
egenskaben animation-delay,
som angiver forsinkelsen før animationen udføres
egenskaben animation-timing-function,
som angiver animationens udførelseshastighed
egenskaben animation-iteration-count,
som angiver antallet af gentagelser af animationen
egenskaben animation-fill-mode,
som angiver animationens tilstand
egenskaben animation-play-state,
som gør det muligt at sætte animationen på pause
egenskaben animation,
som er en sammentrækning for animationer
kommandoen @keyframes,
som angiver animationens nøglebilleder
jævne overgange transition, som er en animation ved hover over elementet