css3 animation-fill-mod property
Hasil terjemahan：
Animasi
Run Instance »
英[fɪl ] 美[fɪl]
vt.& vi (perasaan) n. untuk mengisi jumlah... ;penuh; mengisi; tambakOrang ketiga tunggal: mengisi jamak: mengisi kata masa lampau: diisi kata lampau: diisimode
英[məʊd] 美[moʊd] n cara; fesyen, fesyencss3 animation-fill-mod propertysintaks
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 propertycontoh
<!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