Properti animation-fill-mode

Properti animation-fill-mode mengatur pada posisi mana animasi berhenti setelah selesai. Secara default, animasi kembali ke nilai semula dan ini mungkin terlihat tidak terlalu bagus.

Sintaks

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

Nilai

Nilai	Deskripsi
`none`	Jika delay animasi diatur - maka selama waktu delay elemen akan tetap di tempat, lalu secara lompatan berpindah ke bingkai `0%`. Setelah animasi selesai, elemen tidak akan tetap dalam status di mana ia berhenti, tetapi akan melompat ke status awal.
`backwards`	Memaksa elemen untuk bergerak setelah halaman dimuat ke bingkai `0%`, bahkan jika delay `animation-delay` diatur, dan tetap di sana sampai animasi dimulai. Setelah animasi selesai, elemen tidak akan tetap dalam status di mana ia berhenti, akan melompat ke status awal.
`forwards`	Memberi tahu browser bahwa setelah animasi selesai, elemen akan tetap dalam status di mana ia berhenti.
`both`	Mencakup backwards dan forwards - setelah halaman dimuat, elemen akan diatur ke bingkai `0%`, dan setelah animasi selesai, elemen akan tetap di tempat di mana ia berhenti.

Nilai default: none.

Contoh . Nilai none

Dalam contoh ini margin-left diatur ke nilai 300px untuk elemen, dan untuk bingkai pertama animasi - ke 0px. Karena tidak ada delay animation-delay, maka elemen setelah halaman dimuat akan berada pada 0px, bukan pada 300px. Selain itu, animasi setelah selesai akan melompat ke nilai awal:

<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 diatur ke nilai 300px untuk elemen, dan untuk bingkai pertama animasi - ke 0px. Juga untuk elemen diatur delay animation-delay selama 3 detik, sehingga elemen setelah halaman dimuat akan berada pada 300px, bukan pada 0px, dan akan berdiri di sana 3 detik setelah animasi dimulai lalu secara lompatan berpindah ke 0px - dan animasi akan mulai dari sana. Selain itu, animasi setelah selesai akan melompat ke nilai awal:

<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 diatur ke nilai 300px untuk elemen, dan untuk bingkai pertama animasi - ke 0px. Juga untuk elemen diatur animation-fill-mode dengan nilai backwards, sehingga elemen setelah halaman dimuat akan berada pada 0px, bukan pada 300px, seperti halnya untuk animation-fill-mode dengan nilai none. Selain itu, animasi setelah selesai akan melompat ke nilai awal:

<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 jumlah pengulangan sama dengan 1

Dalam contoh ini margin-left diatur ke nilai 300px untuk elemen, dan untuk bingkai pertama animasi - ke 0px. Juga untuk elemen diatur delay animation-delay selama 3 detik, sehingga elemen setelah halaman dimuat akan berada pada 300px, bukan pada 0px, dan akan berdiri di sana 3 detik setelah animasi dimulai lalu secara lompatan berpindah ke 0px - dan animasi akan mulai dari sana. Karena animation-fill-mode diatur dengan nilai none, maka setelah pemutaran animasi elemen akan kembali ke nilai awal:

<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 jumlah pengulangan sama dengan 1

Dalam contoh ini animation-fill-mode diatur dengan nilai forwards, dan jumlah pengulangan animasi - ke 1. Setelah pemutaran animasi, elemen akan tetap berada di posisi di mana animasi berakhir, bukan melompat ke titik awal.

Selain itu, margin-left diatur ke nilai 300px untuk elemen, dan untuk bingkai pertama animasi - ke 0px. Juga untuk elemen diatur delay animation-delay selama 3 detik, sehingga elemen setelah halaman dimuat akan berada pada 300px, bukan pada 0px, dan akan berdiri di sana 3 detik setelah animasi dimulai, lalu secara lompatan berpindah ke 0px - dan animasi akan mulai 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 jumlah pengulangan sama dengan 1

Dalam contoh ini animation-fill-mode diatur dengan nilai both, dan jumlah pengulangan animasi - ke 1. Setelah halaman dimuat, elemen akan berdiri di bingkai pertama animasi (pada 0px, bukan pada 300px), dan setelah pemutaran animasi elemen akan tetap berada di posisi di mana animasi berakhir, bukan melompat ke titik awal:

<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

properti animation-name,
yang menetapkan nama animasi
properti animation-duration,
yang menetapkan durasi animasi
properti animation-delay,
yang menetapkan delay sebelum eksekusi animasi
properti animation-timing-function,
yang menetapkan kecepatan eksekusi animasi
properti animation-iteration-count,
yang menetapkan jumlah iterasi animasi
properti animation-direction,
yang menetapkan arah animasi
properti animation-play-state,
yang memungkinkan untuk menjeda animasi
properti animation,
yang merupakan singkatan untuk animasi
perintah @keyframes,
yang menetapkan bingkai kunci animasi
transisi halus transition, yang merupakan animasi saat mengarahkan kursor ke elemen