Animation-fill-mode хусусияти

animation-fill-mode хусусияти анимация туганда қандай холатда тўхташини белгилайди. Даркор холатда анимация бошланғич қийматга қайтади ва бу ҳамон яхши кўринмаслиги мумкин.

Синтаксис

селектор {
	animation-fill-mode: backwards | forwards | both | none;
}

Қийматлар

Қиймат	Тасниф
`none`	Агар анимацияга кечиктириш белгиланган бўлса - кечиктириш давомида элемент ўрнида қолади, сўнгра sakkachon `0%` кадрга ўтади. Анимация тугагандан сўнг элемент тўхтаган жойда қолмайди, балки бошланғич холатга sakkachon ўтиб кетади.
`backwards`	Саҳифа юклангандан сўнг элементни `0%` кадрга ўтишига majburlaydi, агар кечиктириш белгиланган бўлса ҳам, `animation-delay`, ва у ерда анимация бошлангунча қолади. Анимация тугагандан сўнг элемент тўхтаган жойда қолмайди, балки бошланғич холатга sakkachon ўтиб кетади.
`forwards`	Браузерга анимация тугагандан сўнг элемент тўхтаган жойда қолишини кўрсатади.
`both`	Backwards ва forwards ни ўз ичига олади - саҳифа юклангандан сўнг элемент `0%` кадрга ўрнатилади, анимация тугагандан сўнг элемент тўхтаган жойда қолади.

Даркор қиймат: none.

Мисол . None қиймати

Бу мисолда margin-left элемент учун 300px қийматига ўрнатилган, анимациянинг биринчи кадри учун эса 0px. animation-delay кечиктириш мавжуд эмаслиги сабабли, элемент саҳифа юклангандан сўнг 0px да, 300px да эмас бўлади. Бундан ташқари, анимация тугагандан сўнг sakkachon бошланғич қийматга ўтиб кетади:

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

Мисол . None қиймати

Бу мисолда margin-left элемент учун 300px қийматига ўрнатилган, анимациянинг биринчи кадри учун эса 0px. Шунингдек, элемент учун animation-delay кечиктириш 3 сонияга ўрнатилган, шу сабаб элемент саҳифа юклангандан сўнг 300px да бўлади, 0px да эмас, ва анимация бошлангунича 3 сония ўша ерда туради сўнгра sakkachon 0px га ўтади - ва анимация ўша ердан бошланади. Бундан ташқари, анимация тугагандан сўнг sakkachon бошланғич қийматга ўтиб кетади:

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

Мисол . Backwards қиймати

Бу мисолда margin-left элемент учун 300px қийматига ўрнатилган, анимациянинг биринчи кадри учун эса 0px. Шунингдек, элемент учун animation-fill-mode backwards қийматига ўрнатилган, шу сабаб элемент саҳифа юклангандан сўнг 0px да бўлади, 300px да эмас, animation-fill-mode none қийматида бўлганидек. Бундан ташқари, анимация тугагандан сўнг sakkachon бошланғич қийматга ўтиб кетади:

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

Мисол . None қиймати ва такрорлаш сони 1 га тенг

Бу мисолда margin-left элемент учун 300px қийматига ўрнатилган, анимациянинг биринчи кадри учун эса 0px. Шунингдек, элемент учун animation-delay кечиктириш 3 сонияга ўрнатилган, шу сабаб элемент саҳифа юклангандан сўнг 300px да бўлади, 0px да эмас, ва анимация бошлангунича 3 сония ўша ерда туради сўнгра sakkachon 0px га ўтади - ва анимация ўша ердан бошланади. animation-fill-mode none қийматига ўрнатилганлиги сабабли, анимация тугагандан сўнг элемент бошланғич қийматга қайтади:

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

Мисол . Forwards қиймати ва такрорлаш сони 1 га тенг

Бу мисолда animation-fill-mode forwards қийматига ўрнатилган, а анимацияни такрорлаш сони - 1. Анимация тугагандан сўнг элемент анимация тугаган жойда қолади, бошланғич нуқтага sakkachon ўтиб кетмайди.

Бундан ташқари, margin-left элемент учун 300px қийматига ўрнатилган, анимациянинг биринчи кадри учун эса 0px. Шунингдек, элемент учун animation-delay кечиктириш 3 сонияга ўрнатилган, шу сабаб элемент саҳифа юклангандан сўнг 300px да бўлади, 0px да эмас, ва анимация бошлангунича 3 сония ўша ерда туради, сўнгра sakkachon 0px га ўтади - ва анимация ўша ердан бошланади:

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

Мисол . Both қиймати ва такрорлаш сони 1 га тенг

Бу мисолда animation-fill-mode both қийматига ўрнатилган, а анимацияни такрорлаш сони - 1. Саҳифа юклангандан сўнг элемент анимациянинг биринчи кадрида бўлади (0px да, 300px да эмас), анимация тугагандан сўнг элемент анимация тугаган жойда қолади, бошланғич нуқтага sakkachon ўтиб кетмайди:

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

Шунингдек қаранг

animation-name хусусияти,
анимация номини белгилайди
animation-duration хусусияти,
анимация давомийлигини белгилайди
animation-delay хусусияти,
аниманиядан олдинги кечиктиришни белгилайди
animation-timing-function хусусияти,
аниманиянинг ишлаш тезлигини белгилайди
animation-iteration-count хусусияти,
аниманиянинг такрорлашлар сонини белгилайди
animation-direction хусусияти,
аниманиянинг йўналишини белгилайди
animation-play-state хусусияти,
аниманияни тўхтатиб қўйиш имконини беради
animation хусусияти,
анимациялар учун қисқартмани ифодалайди
@keyframes буйруги,
анимациянинг калит кадрларини белгилайди
transition мулосим ўтишлар, элемент устига чиқилгандаги аниманияни ифодалайди