Хосияти animation-fill-mode

Хосияти animation-fill-mode муайян мекунад, ки анимация дар кадом вазъият бистад пас аз поён. Бо супориши пешин анимация ба қимати ибтидоӣ бармегардад ва ин метавонад хеле зебо набошад.

Синтаксис

интихобкунанда {
	animation-fill-mode: backwards | forwards | both | none;
}

Қиматҳо

Қимат	Тавсиф
`none`	Агар таъхири анимация муайян шуда бошад - дар муддати таъхир унсур дар ҷои худ мемонад, ва сипас ба тарзи париш ба кадри `0%` мегузарад. Пас аз поёни анимация унсур дар он ҳолате, ки истод, намемонад, балки ба ҳолати ибтидоӣ мепарад.
`backwards`	Унсурро пас аз боргузории саҳифа ба сӯи кадри `0%` ҳаракат мекунад, ҳатто агар таъхир муайян шуда бошад `animation-delay`, ва он ҷо мемонад, то анимация оғоз нашавад. Пас аз поёни анимация унсур дар он ҳолате, ки истод, намемонад, ба ҳолати ибтидоӣ мепарад.
`forwards`	Ба браузер фармон медиҳад, ки пас аз поёни анимация унсур дар он ҳолате, ки истод, бимонад.
`both`	`backwards` ва `forwards`-ро дар бар мегирад - пас аз боргузории саҳифа унсур ба кадри `0%` меистад, ва пас аз поёни анимация унсур дар он ҷое, ки истод, мемонад.

Қимати пешфарз: none.

Намуна . Қимати none

Дар ин намуна margin-left ба қимати 300px барои унсур муайян шудааст, ва барои кадри аввали анимация - ба 0px. Чун таъхири animation-delay вуҷуд надорад, пас унсур пас аз боргузории саҳифа ба 0px меравад, на ба 300px. Ғайр аз он, анимация пас аз поён ба тарзи париш ба қимати ибтидоӣ мегузарад:

<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 сония меистад пас аз оғози анимация ва сипас ба тарзи париш ба 0px мегузарад - ва анимация аз он ҷо оғоз мешавад. Ғайр аз он, анимация пас аз поён ба тарзи париш ба қимати ибтидоӣ мегузарад:

<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 буд. Ғайр аз он, анимация пас аз поён ба тарзи париш ба қимати ибтидоӣ мегузарад:

<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 сония меистад пас аз оғози анимация ва сипас ба тарзи париш ба 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. Пас аз иҷрои анимация унсур дар он ҷое, ки анимация поён ёфт, мемонад, на ба нуқтаи ибтидоӣ мепарад.

Ғайр аз он, margin-left муайян шудааст ба қимати 300px барои унсур, ва барои кадри аввали анимация - ба 0px. Инчунин барои унсур таъхири animation-delay ба 3 сония муайян шудааст, аз ин рӯ унсур пас аз боргузории саҳифа ба 300px меравад, на ба 0px, ва он ҷо 3 сония меистад пас аз оғози анимация, ва сипас ба тарзи париш ба 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), ва пас аз иҷрои анимация унсур дар он ҷое, ки анимация поён ёфт, мемонад, на ба нуқтаи ибтидоӣ мепарад:

<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, ки анимацияе мебошанд, ки бо нишон додан ба унсур рӯй медиҳанд