Ominaisuus animation-direction

Ominaisuus animation-direction määrittää animaation suunnan. Oletusarvoisesti animaatio toistuu vain 1 kerran ja palaa sitten alkutilaan, jonka jälkeen, jos viive animation-delay on asetettu, se odottaa määritetyn ajan ja sitten sykli alkaa alusta.

Tämä ominaisuus mahdollistaa tämän käyttäytymisen muuttamisen, esimerkiksi siten, että animaatio pysyy lopputilassaan sen päätyttyä, eikä palaakaan alkutilaan.

Voit myös määrittää käyttäytymisen: animaatio etenee ääripisteeseen ja palaa takaisin (kuten transition-animaatioissa). Katso kuvaus alla.

Syntaksi

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

Arvot

Arvo	Kuvaus
`reverse`	Animaatio toistuu käänteiseen suuntaan.
`alternate`	Animaatio toistuu ensin eteenpäin, ja sitten taaksepäin (kuten transition).
`alternate-reverse`	Animaatio toistuu lopputilasta alkutilaan ja takaisin. Pohjimmiltaan tämä on arvot `alternate` ja `reverse` yhdessä.
`normal`	Animaatio toistuu alusta loppuun, ja sen päättyessä se hyppää takaisin alkutilaan.

Oletusarvo: normal.

Esimerkki

Nyt elementti liikkuu yhteen suuntaan, ja sitten palaa takaisin, koska arvoksi on asetettu alternate. Samalla animation-duration on arvoltaan 3 sekuntia, mikä tarkoittaa, että liikkuminen "sinne" ja "takaisin" kestävät kumpi 3 sekuntia:

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

Esimerkki

Nyt elementti liikkuu käänteiseen suuntaan (pitäisi liikkua vasemmalta oikealle, mutta liikkuu oikealta vasemmalle):

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

Esimerkki

Nyt elementti liikkuu edestakaisin, mutta käänteiseen suuntaan (pitäisi aloittaa vasemmalta, mutta aloittaa oikealta):

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

Katso myös

ominaisuus animation-name,
joka määrittää animaation nimen
ominaisuus animation-duration,
joka määrittää animaation keston
ominaisuus animation-delay,
joka määrittää viiveen ennen animaation suorittamista
ominaisuus animation-timing-function,
joka määrittää animaation nopeuden
ominaisuus animation-iteration-count,
joka määrittää animaation toistokerrat
ominaisuus animation-fill-mode,
joka määrittää animaation tilan
ominaisuus animation-play-state,
joka mahdollistaa animaation pysäyttämisen
ominaisuus animation,
joka on lyhenne animaatioille
komento @keyframes,
joka määrittää animaation avainkehykset
pehmeät siirtymät transition, jotka edustavat animaatiota elementin päälle viedyssä osoittimessa