Omadus animation-direction

Omadus animation-direction määrab animatsiooni suuna. Vaikimisi kordub animatsioon ainult 1 kord ja seejärel naaseb algseisundisse, seejärel, kui on määratud viivitus animation-delay, ootab see määratud aja ja siis tsükkel algab uuesti.

See omadus võimaldab seda käitumist muuta, näiteks nii, et animatsioon jääks pärast lõppu sinna, kus see lõppes, mitte ei hüppaks tagasi algasendisse.

Samuti saab määrata järgmist käitumist: animatsioon jõuab äärmuspunkti ja tuleb tagasi (nagu transition puhul). Vaadake allpool olevat kirjeldust.

Süntaks

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

Väärtused

Väärtus	Kirjeldus
`reverse`	Animatsioon mängitakse tagurpidises suunas.
`alternate`	Animatsioon mängitakse kõigepealt edasi, seejärel tagasi (nagu transition).
`alternate-reverse`	Animatsioon mängitakse lõppasendist algasendisse ja tagasi. Sisuliselt on need väärtused `alternate` ja `reverse` ühes pudelis.
`normal`	Animatsioon mängitakse algusest lõpuni ning pärast lõppu hüppab see hüppega algasendisse tagasi.

Vaikeväärtus: normal.

Näide

Nüüd liigub element ühes suunas, seejärel liigub tagasi, kuna on määratud väärtus alternate. Samal ajal on animation-duration väärtuseks 3 sekundit ja see tähendab, et liikumised "sinna" ja "tagasi" kestavad mõlemad 3 sekundit:

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

Näide

Nüüd liigub element vastassuunas (peaks liikuma vasakult paremale, aga liigub paremalt vasakule):

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

Näide

Nüüd liigub element edasi-tagasi, kuid vastassuunas (peaks alustama vasakult, aga alustab paremalt):

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

Vaata ka

omadus animation-name,
mis määrab animatsiooni nime
omadus animation-duration,
mis määrab animatsiooni kestvuse
omadus animation-delay,
mis määrab viivituse enne animatsiooni käivitamist
omadus animation-timing-function,
mis määrab animatsiooni täitmise kiiruse
omadus animation-iteration-count,
mis määrab animatsiooni korduste arvu
omadus animation-fill-mode,
mis määrab animatsiooni oleku
omadus animation-play-state,
mis võimaldab animatsiooni peatada
omadus animation,
mis on lühend animatsioonide jaoks
käsk @keyframes,
mis määrab animatsiooni võtmeraamid
sujuvad ülemineked transition, mis on animatsioon elemendile hiirega viibimiseks