Animasi

英[fɪl ] 美[fɪl]

vt.& vi (perasaan)

n. untuk mengisi jumlah... ;penuh; mengisi; tambak

Orang ketiga tunggal: mengisi jamak: mengisi kata masa lampau: diisi kata lampau: diisi

mode

英[məʊd] 美[moʊd]

n cara; fesyen, fesyen

css3 animation-fill-mod property sintaks

Fungsi: Atribut mod isian-animasi menentukan sama ada kesan animasi kelihatan sebelum atau selepas animasi dimainkan.

Sintaks: mod-isi-animasi: tiada | ke belakang |. Kedua-duanya; ke hadapan Apabila animasi selesai, simpan nilai sifat terakhir (ditakrifkan dalam bingkai utama terakhir). ke belakang menggunakan nilai sifat mula (ditakrifkan dalam bingkai utama pertama) sebelum animasi dipaparkan untuk tempoh masa yang ditentukan oleh kelewatan animasi. Kedua-dua mod isian ke hadapan dan ke belakang digunakan.​

Nota: Internet Explorer 9 dan versi terdahulu tidak menyokong atribut mod-isi-animasi.

css3 animation-fill-mod property contoh

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<style> 
div
{
	width:100px;
	height:100px;
	background:red;
	position:relative;
	animation:mymove 3s;
	animation-iteration-count:2;
	animation-fill-mode:forwards;

	/* Safari 和 Chrome */
	-webkit-animation:mymove 3s;
	-webkit-animation-iteration-count:2;
	-webkit-animation-fill-mode:forwards;
}

@keyframes mymove
{
	from {top:0px;}
	to {top:200px;}
}

@-webkit-keyframes mymove /* Safari 和 Chrome */
{
	from {top:0px;}
	to {top:200px;}
}
</style>
</head>
<body>

<p><strong>注意：</strong>Internet Explorer 9 及其之前的版本不支持 animation-fill-mode 属性。</p>

<div></div>

</body>
</html>

Run Instance »

Klik butang "Run Instance" untuk melihat instance dalam talian