Eienskap animation-fill-mode

Die eienskap animation-fill-mode stel vas in watter posisie animasies moet stop na voltooiing. By verstek keer die animasie terug na die oorspronklike waarde en dit kan lyk nie baie mooi nie.

Sintaksis

selektor {
	animation-fill-mode: backwards | forwards | both | none;
}

Waardes

Waarde	Beskrywing
`none`	As daar 'n animasievertraging is - sal die element gedurende die vertragingstyd in posisie bly, en dan skielik oorskakel na die `0%` raam. Na afloop van die animasie sal die element nie bly in die toestand waar dit gestop het nie, maar sal dit terugspring na die begintoestand.
`backwards`	Dwing die element om na die bladsy gelaai is om na die `0%` raam te beweeg, selfs as daar 'n vertraging gestel is `animation-delay`, en daar te bly totdat die animasie begin. Na afloop van die animasie sal die element nie bly in die toestand waar dit gestop het nie, maar sal terugspring na die begintoestand.
`forwards`	Gee die leser die opdrag dat na afloop van die animasie die element sal bly in die toestand waar dit gestop het.
`both`	Sluit backwards en forwards in - nadat die bladsy gelaai is, sal die element na die `0%` raam beweeg, en na afloop van die animasie sal die element bly waar dit gestop het.

Standaardwaarde: none.

Voorbeeld . Waarde none

In hierdie voorbeeld is margin-left gestel op 300px vir die element, en vir die eerste animasieraam - op 0px. Aangesien daar geen vertraging is animation-delay nie, sal die element nadat die bladsy gelaai is op 0px wees, en nie op 300px nie. Boonop sal die animasie na afloop terugspring na die beginwaarde:

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

Voorbeeld . Waarde none

In hierdie voorbeeld is margin-left gestel op 300px vir die element, en vir die eerste animasieraam - op 0px. Daar is ook 'n vertraging animation-delay van 3 sekondes vir die element, dus sal die element nadat die bladsy gelaai is op 300px wees, en nie op 0px nie, en sal daar bly vir 3 sekondes totdat die animasie begin en dan skielik oorskakel na 0px - en die animasie sal daarvandaan begin. Boonop sal die animasie na afloop terugspring na die beginwaarde:

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

Voorbeeld . Waarde backwards

In hierdie voorbeeld is margin-left gestel op 300px vir die element, en vir die eerste animasieraam - op 0px. Daar is ook animation-fill-mode op die waarde backwards gestel, dus sal die element nadat die bladsy gelaai is op 0px wees, en nie op 300px nie, soos dit die geval was vir animation-fill-mode op die waarde none. Boonop sal die animasie na afloop terugspring na die beginwaarde:

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

Voorbeeld . Waarde none en aantal herhalings gelyk aan 1

In hierdie voorbeeld is margin-left gestel op 300px vir die element, en vir die eerste animasieraam - op 0px. Daar is ook 'n vertraging animation-delay van 3 sekondes vir die element, dus sal die element nadat die bladsy gelaai is op 300px wees, en nie op 0px nie, en sal daar bly vir 3 sekondes totdat die animasie begin en dan skielik oorskakel na 0px - en die animasie sal daarvandaan begin. Aangesien animation-fill-mode gestel is op die waarde none, sal die element na die animasie afspeel terugkeer na die beginwaarde:

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

Voorbeeld . Waarde forwards en aantal herhalings gelyk aan 1

In hierdie voorbeeld is animation-fill-mode gestel op die waarde forwards, en die aantal animasieherhalings - op 1. Na die animasie afspeel sal die element bly in die posisie waar die animasie geëindig het, en nie terugspring na die beginpunt nie.

Boonop is margin-left gestel op die waarde 300px vir die element, en vir die eerste animasieraam - op 0px. Daar is ook 'n vertraging animation-delay van 3 sekondes vir die element, dus sal die element nadat die bladsy gelaai is op 300px wees, en nie op 0px nie, en sal daar bly vir 3 sekondes totdat die animasie begin, en dan skielik oorskakel na 0px - en die animasie sal daarvandaan begin:

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

Voorbeeld . Waarde both en aantal herhalings gelyk aan 1

In hierdie voorbeeld is animation-fill-mode gestel op die waarde both, en die aantal animasieherhalings - op 1. Nadat die bladsy gelaai is sal die element in die eerste animasieraam staan (op 0px, en nie op 300px nie), en na die animasie afspeel sal die element bly in die posisie waar die animasie geëindig het, en nie terugspring na die beginpunt nie:

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

Sien ook

die eienskap animation-name,
wat die naam van die animasie spesifiseer
die eienskap animation-duration,
wat die duur van die animasie spesifiseer
die eienskap animation-delay,
wat die vertraging voor animasie-uitvoering spesifiseer
die eienskap animation-timing-function,
wat die spoed van animasie-uitvoering spesifiseer
die eienskap animation-iteration-count,
wat die aantal animasie-iterasies spesifiseer
die eienskap animation-direction,
wat die rigting van die animasie spesifiseer
die eienskap animation-play-state,
wat toelaat om die animasie te pauseer
die eienskap animation,
wat 'n kortvorm vir animasies is
die opdrag @keyframes,
wat die sleutelrame van die animasie spesifiseer
die vloeiende oorgange transition, wat 'n animasie by wys-na-element verteenwoordig