animation-fill-mode Özelliği

animation-fill-mode özelliği, animasyonun bitiminden sonra hangi konumda duracağını belirler. Varsayılan olarak animasyon başlangıç değerine döner ve bu pek hoş görünmeyebilir.

Sözdizimi

seçici {
	animation-fill-mode: backwards | forwards | both | none;
}

Değerler

Değer	Açıklama
`none`	Eğer animasyonda bir gecikme varsa - gecikme süresi boyunca öge olduğu yerde kalacak, sonra da sıçrayarak `0%` karesine geçecektir. Animasyon bittikten sonra öge, durduğu durumda kalmaz, başlangıç durumuna sıçrar.
`backwards`	Bir gecikme olsa bile, sayfa yüklendikten sonra ögenin `0%` karesine gitmesini sağlar `animation-delay`, ve animasyon başlayana kadar orada kalır. Animasyon bittikten sonra öge, durduğu durumda kalmaz, başlangıç durumuna sıçrar.
`forwards`	Tarayıcıya, animasyon bittikten sonra ögenin durduğu durumda kalacağını belirtir.
`both`	Backwards ve forwards'ı içerir - sayfa yüklendikten sonra öge `0%` karesine yerleşir ve animasyon bittikten sonra öge durduğu yerde kalır.

Varsayılan değer: none.

Örnek . None değeri

Bu örnekte, öge için margin-left 300px olarak ayarlanmıştır, animasyonun ilk karesi için ise 0px olarak. animation-delay gecikmesi olmadığından, öge sayfa yüklendikten sonra 300px değil, 0px değerine gelecektir. Ayrıca, animasyon bittikten sonra başlangıç değerine sıçrayacaktır:

<div id="elem"></div>

@keyframes move {
	from {
		margin-left: 0;
	}
	to {
		margin-left: 400px;
	}
}

#elem {
	margin-left: 300px;
	animation-fill-mode: none;
	animation-delay: 0s;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Örnek . None değeri

Bu örnekte, öge için margin-left 300px olarak ayarlanmıştır, animasyonun ilk karesi için ise 0px olarak. Ayrıca öge için animation-delay gecikmesi 3 saniye olarak ayarlanmıştır, bu yüzden öge sayfa yüklendikten sonra 0px değil, 300px değerine gelecek ve animasyon başlayana kadar orada 3 saniye duracak, sonra sıçrayarak 0px değerine geçecek - ve animasyon oradan başlayacak. Ayrıca, animasyon bittikten sonra başlangıç değerine sıçrayacaktır:

<div id="elem"></div>

@keyframes move {
	from {
		margin-left: 0;
	}
	to {
		margin-left: 400px;
	}
}

#elem {
	margin-left: 300px;
	animation-fill-mode: none;
	animation-delay: 0s;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Örnek . Backwards değeri

Bu örnekte, öge için margin-left 300px olarak ayarlanmıştır, animasyonun ilk karesi için ise 0px olarak. Ayrıca öge için animation-fill-mode backwards değerine ayarlanmıştır, bu yüzden öge sayfa yüklendikten sonra animation-fill-mode none değerinde olduğu gibi 300px değil, 0px değerine gelecektir. Ayrıca, animasyon bittikten sonra başlangıç değerine sıçrayacaktır:

<div id="elem"></div>

@keyframes move {
	from {
		margin-left: 0;
	}
	to {
		margin-left: 400px;
	}
}

#elem {
	margin-left: 300px;
	animation-fill-mode: backwards;
	animation-delay: 0s;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Örnek . None değeri ve tekrar sayısı 1

Bu örnekte, öge için margin-left 300px olarak ayarlanmıştır, animasyonun ilk karesi için ise 0px olarak. Ayrıca öge için animation-delay gecikmesi 3 saniye olarak ayarlanmıştır, bu yüzden öge sayfa yüklendikten sonra 0px değil, 300px değerine gelecek ve animasyon başlayana kadar orada 3 saniye duracak, sonra sıçrayarak 0px değerine geçecek - ve animasyon oradan başlayacak. animation-fill-mode none değerine ayarlandığı için, animasyon oynatıldıktan sonra öge başlangıç değerine dönecektir:

<div id="elem"></div>

@keyframes move {
	from {
		margin-left: 0;
	}
	to {
		margin-left: 400px;
	}
}

#elem {
	margin-left: 300px;
	animation-fill-mode: none;
	animation-delay: 3s;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: 1;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Örnek . Forwards değeri ve tekrar sayısı 1

Bu örnekte animation-fill-mode forwards değerine ayarlanmıştır ve animasyon tekrar sayısı - 1 olarak. Animasyon oynatıldıktan sonra öge, animasyonun bittiği konumda kalacak, başlangıç noktasına sıçramayacaktır.

Ayrıca, öge için margin-left 300px olarak ayarlanmıştır, animasyonun ilk karesi için ise 0px olarak. Ayrıca öge için animation-delay gecikmesi 3 saniye olarak ayarlanmıştır, bu yüzden öge sayfa yüklendikten sonra 0px değil, 300px değerine gelecek ve animasyon başlayana kadar orada 3 saniye duracak, sonra sıçrayarak 0px değerine geçecek - ve animasyon oradan başlayacak:

<div id="elem"></div>

@keyframes move {
	from {
		margin-left: 0;
	}
	to {
		margin-left: 400px;
	}
}

#elem {
	margin-left: 300px;
	animation-fill-mode: forwards;
	animation-delay: 3s;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: 1;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Örnek . Both değeri ve tekrar sayısı 1

Bu örnekte animation-fill-mode both değerine ayarlanmıştır ve animasyon tekrar sayısı - 1 olarak. Sayfa yüklendikten sonra öge animasyonun ilk karesinde duracaktır (300px değil, 0px değerinde), ve animasyon oynatıldıktan sonra öge animasyonun bittiği konumda kalacak, başlangıç noktasına sıçramayacaktır:

<div id="elem"></div>

@keyframes move {
	from {
		margin-left: 0;
	}
	to {
		margin-left: 400px;
	}
}

#elem {
	margin-left: 300px;
	animation-fill-mode: both;
	animation-delay: 3s;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: 1;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Ayrıca Bakınız

animasyonun adını belirleyen animation-name özelliği
animasyonun süresini belirleyen animation-duration özelliği
animasyondan önceki gecikmeyi belirleyen animation-delay özelliği
animasyonun oynatılma hızını belirleyen animation-timing-function özelliği
animasyonun tekrar sayısını belirleyen animation-iteration-count özelliği
animasyonun yönünü belirleyen animation-direction özelliği
animasyonu duraklatmayı sağlayan animation-play-state özelliği
animasyonlar için kısa yol görevi gören animation özelliği
animasyonun anahtar karelerini belirleyen @keyframes komutu
ögenin üzerine gelindiğinde tetiklenen animasyonlar olan transition geçişleri