Sifat animation-fill-mode

Sifat animation-fill-mode menetapkan pada kedudukan mana animasi berhenti selepas tamat. Secara lalai, animasi kembali kepada nilai asal dan ini mungkin kelihatan tidak begitu cantik.

Sintaks

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

Nilai

Nilai	Keterangan
`none`	Jika terdapat kelewatan animasi - maka dalam tempoh masa kelewatan elemen akan kekal di tempat, kemudian akan melompat ke bingkai `0%`. Selepas animasi tamat, elemen tidak akan kekal dalam keadaan di mana ia berhenti, tetapi akan melompat kembali ke keadaan asal.
`backwards`	Memaksa elemen bergerak selepas halaman dimuatkan ke bingkai `0%`, walaupun terdapat kelewatan `animation-delay`, dan kekal di sana sehingga animasi bermula. Selepas animasi tamat, elemen tidak akan kekal dalam keadaan di mana ia berhenti, tetapi akan melompat kembali ke keadaan asal.
`forwards`	Mengarahkan pelayar bahawa selepas animasi tamat, elemen akan kekal dalam keadaan di mana ia berhenti.
`both`	Menggabungkan backwards dan forwards - selepas halaman dimuatkan, elemen akan ditetapkan ke bingkai `0%`, dan selepas animasi tamat, elemen akan kekal di tempat ia berhenti.

Nilai lalai: none.

Contoh . Nilai none

Dalam contoh ini, margin-left ditetapkan kepada nilai 300px untuk elemen, dan untuk bingkai pertama animasi - kepada 0px. Oleh kerana tiada kelewatan animation-delay, elemen selepas halaman dimuatkan akan berada pada 0px, dan bukan pada 300px. Selain itu, animasi selepas tamat akan melompat kembali ke nilai asal:

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

Contoh . Nilai none

Dalam contoh ini, margin-left ditetapkan kepada nilai 300px untuk elemen, dan untuk bingkai pertama animasi - kepada 0px. Juga untuk elemen ditetapkan kelewatan animation-delay selama 3 saat, oleh itu elemen selepas halaman dimuatkan akan berada pada 300px, dan bukan pada 0px, dan akan kekal di sana 3 saat selepas animasi bermula kemudian akan melompat ke 0px - dan animasi akan bermula dari sana. Selain itu, animasi selepas tamat akan melompat kembali ke nilai asal:

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

Contoh . Nilai backwards

Dalam contoh ini, margin-left ditetapkan kepada nilai 300px untuk elemen, dan untuk bingkai pertama animasi - kepada 0px. Juga untuk elemen ditetapkan animation-fill-mode pada nilai backwards, oleh itu elemen selepas halaman dimuatkan akan berada pada 0px, dan bukan pada 300px, seperti untuk animation-fill-mode pada nilai none. Selain itu, animasi selepas tamat akan melompat kembali ke nilai asal:

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

Contoh . Nilai none dan bilangan ulangan sama dengan 1

Dalam contoh ini, margin-left ditetapkan kepada nilai 300px untuk elemen, dan untuk bingkai pertama animasi - kepada 0px. Juga untuk elemen ditetapkan kelewatan animation-delay selama 3 saat, oleh itu elemen selepas halaman dimuatkan akan berada pada 300px, dan bukan pada 0px, dan akan kekal di sana 3 saat selepas animasi bermula kemudian akan melompat ke 0px - dan animasi akan bermula dari sana. Oleh kerana animation-fill-mode ditetapkan pada nilai none, maka selepas animasi dimainkan elemen akan kembali ke nilai asal:

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

Contoh . Nilai forwards dan bilangan ulangan sama dengan 1

Dalam contoh ini, animation-fill-mode ditetapkan pada nilai forwards, dan bilangan ulangan animasi - kepada 1. Selepas animasi dimainkan, elemen akan kekal dalam kedudukan di mana animasi tamat, dan tidak akan melompat kembali ke titik asal.

Selain itu, margin-left ditetapkan kepada nilai 300px untuk elemen, dan untuk bingkai pertama animasi - kepada 0px. Juga untuk elemen ditetapkan kelewatan animation-delay selama 3 saat, oleh itu elemen selepas halaman dimuatkan akan berada pada 300px, dan bukan pada 0px, dan akan kekal di sana 3 saat selepas animasi bermula, kemudian akan melompat ke 0px - dan animasi akan bermula dari sana:

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

Contoh . Nilai both dan bilangan ulangan sama dengan 1

Dalam contoh ini, animation-fill-mode ditetapkan pada nilai both, dan bilangan ulangan animasi - kepada 1. Selepas halaman dimuatkan, elemen akan berada dalam bingkai pertama animasi (pada 0px, dan bukan pada 300px), dan selepas animasi dimainkan, elemen akan kekal dalam kedudukan di mana animasi tamat, dan tidak akan melompat kembali ke titik asal:

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

Lihat juga

sifat animation-name,
yang menetapkan nama animasi
sifat animation-duration,
yang menetapkan tempoh masa animasi
sifat animation-delay,
yang menetapkan kelewatan sebelum pelaksanaan animasi
sifat animation-timing-function,
yang menetapkan kelajuan pelaksanaan animasi
sifat animation-iteration-count,
yang menetapkan bilangan lelaran animasi
sifat animation-direction,
yang menetapkan arah animasi
sifat animation-play-state,
yang membolehkan menjeda animasi
sifat animation,
merupakan singkatan untuk animasi
arahan @keyframes,
yang menetapkan bingkai utama animasi
peralihan lancar transition, merupakan animasi ketika kursor diarahkan pada elemen