animation-direction Özelliği

animation-direction özelliği animasyonun yönünü belirler. Varsayılan olarak animasyon sadece 1 kez tekrarlanır ve ardından başlangıç durumuna döner, sonra, eğer bir gecikme animation-delay ayarlandıysa, belirlenen süre kadar bekler ve ardından döngü baştan başlar.

Bu özellik, bu davranışı değiştirmenize olanak tanır, örneğin, animasyonun bitiminde başlangıç konumuna atlamak yerine, bitirdiği yerde kalmasını sağlayabilirsiniz.

Ayrıca şu davranış da ayarlanabilir: animasyon en uç noktaya kadar gider ve geri döner (transition'da olduğu gibi). Aşağıdaki açıklamalara bakın.

Sözdizimi

seçici {
	animation-direction: normal | reverse | alternate | alternate-reverse;
}

Değerler

Değer	Açıklama
`reverse`	Animasyon ters yönde oynatılır.
`alternate`	Animasyon önce ileri, sonra geri yönde oynatılır (transition gibi).
`alternate-reverse`	Animasyon bitiş konumundan başlangıç konumuna ve tekrar geriye doğru oynatılır. Temelde bu, `alternate` ve `reverse` değerlerinin birleşimidir.
`normal`	Animasyon başlangıçtan sona doğru oynatılır ve bitiminde aniden başlangıç konumuna atlar.

Varsayılan değer: normal.

Örnek

Şimdi öğe bir yöne hareket edecek, sonra geri dönecek, çünkü alternate değeri ayarlandı. Ayrıca animation-duration 3 saniye değerine sahip ve bu, "oraya" ve "geriye" hareketlerin 3 saniye süreceği anlamına gelir:

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

Örnek

Şimdi öğe ters yönde hareket edecek (soldan sağa yerine, sağdan sola hareket edecek):

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

Örnek

Şimdi öğe ileri geri hareket edecek, ama ters yönde başlayacak (soldan başlaması gerekirken sağdan başlayacak):

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

Ayrıca Bakınız

animation-name özelliği,
animasyonun adını belirler
animation-duration özelliği,
animasyonun süresini belirler
animation-delay özelliği,
animasyondan önceki gecikmeyi belirler
animation-timing-function özelliği,
animasyonun hızını belirler
animation-iteration-count özelliği,
animasyonun tekrar sayısını belirler
animation-fill-mode özelliği,
animasyonun durumunu belirler
animation-play-state özelliği,
animasyonu duraklatmanıza olanak tanır
animation özelliği,
animasyonlar için kısa yazım şeklidir
@keyframes komutu,
animasyonun karelerini belirler
pürüzsüz geçişler transition, bir öğenin üzerine gelindiğinde çalışan animasyonlardır