Egenskapen animation-direction

Egenskapen animation-direction anger riktningen på animationen. Som standard upprepas animationen endast 1 gång och återgår sedan till utgångsläget, varefter, om en fördröjning animation-delay är angiven, den väntar den angivna tiden och sedan börjar cykeln om från början.

Denna egenskap möjliggör att ändra detta beteende, till exempel så att animationen efter avslut stannar på den plats där den slutade, istället för att hoppa tillbaka till startpositionen.

Det är också möjligt att ange ett sådant beteende: animationen når extrempunkten och återvänder tillbaka (som i transition). Se beskrivningen nedan.

Syntax

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

Värden

Värde	Beskrivning
`reverse`	Animationen kommer att spelas upp i omvänd riktning.
`alternate`	Animationen kommer att spelas upp först i framåtriktning, och sedan i bakåtriktning (som transition).
`alternate-reverse`	Animationen kommer att spelas upp från slutpositionen till startpositionen och tillbaka. I princip är detta värdena `alternate` och `reverse` i en och samma.
`normal`	Animationen kommer att spelas upp från början till slut, och efter avslut hoppa tillbaka till startpositionen.

Standardvärde: normal.

Exempel

Nu kommer elementet att röra sig i en riktning, och sedan återvända tillbaka, eftersom värdet alternate är angivet. Samtidigt har animation-duration värdet 3 sekunder, vilket betyder att förflyttningarna "fram" och "tillbaka" kommer att vara 3 sekunder långa vardera:

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

Exempel

Nu kommer elementet att röra sig i motsatt riktning (borde från vänster till höger, men kommer från höger till vänster):

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

Exempel

Nu kommer elementet att röra sig fram och tillbaka, men i omvänd riktning (borde börja till vänster, men kommer att börja till höger):

<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 även

egenskapen animation-name,
som anger namnet på animationen
egenskapen animation-duration,
som anger animationens varaktighet
egenskapen animation-delay,
som anger fördröjningen innan animationen utförs
egenskapen animation-timing-function,
som anger hastigheten för animationen
egenskapen animation-iteration-count,
som anger antalet iterationer av animationen
egenskapen animation-fill-mode,
som anger animationens tillstånd
egenskapen animation-play-state,
som möjliggör att pausa animationen
egenskapen animation,
som är en förkortning för animationer
kommandot @keyframes,
som anger nyckelbildrutor för animationen
mjuka övergångar transition, som är animationer vid hovring över ett element