Rumah > Artikel > hujung hadapan web > Bagaimana untuk mencapai kesan tidak hilang apabila animasi berakhir dalam css3
Bagaimana untuk mencapai kesan tidak hilang apabila animasi berakhir dalam css3
- WBOYasal
- 2022-03-29 17:06:502931semak imbas
Dalam css3, anda boleh menggunakan atribut "animation-fill-mode" untuk mencapai kesan tidak hilang selepas animasi tamat. Atribut ini boleh menentukan gaya elemen apabila animasi tidak dimainkan atribut ditetapkan ke hadapan, kesan animasi tidak akan hilang Sintaks ialah "mod-isi-animasi: hadapan".
Persekitaran pengendalian tutorial ini: sistem Windows 10, versi CSS3&&HTML5, komputer Dell G3.
Cara untuk mencapai kesan tidak hilang selepas animasi berakhir dalam css3
Atribut mod-isi-animasi menetapkan bahawa apabila animasi tidak dimainkan (apabila animasi selesai, atau apabila animasi mempunyai kelewatan dan tidak mula bermain), Gaya untuk digunakan pada elemen.
Secara lalai, animasi CSS tidak menjejaskan elemen sehingga bingkai utama pertama dimainkan dan berhenti menjejaskan elemen selepas bingkai kunci terakhir selesai. Sifat mod isian animasi mengatasi tingkah laku ini.
Sintaks CSS
animation-fill-mode: none|forwards|backwards|both|initial|inherit;
tiada Nilai lalai. Animasi tidak menggunakan sebarang gaya pada elemen sasaran sebelum atau selepas animasi dilaksanakan.
ke hadapan Selepas animasi tamat (ditentukan oleh kiraan-iterasi-animasi), animasi akan menggunakan nilai sifat ini.
Animasi ke belakang akan menggunakan nilai sifat yang ditakrifkan dalam kerangka utama yang memulakan lelaran pertama animasi semasa definisi kelewatan animasi. Ini adalah nilai dari bingkai utama (apabila animasi-arah "biasa" atau "ganti") atau masuk ke bingkai utama (apabila animasi-arah "terbalik" atau "ganti-balik" ).
Kedua-dua animasi mengikut peraturan ke hadapan dan ke belakang. Iaitu, animasi mengembangkan sifat animasi dalam kedua-dua arah.
awal menetapkan sifat ini kepada nilai lalainya.
warisi Warisi atribut ini daripada elemen induk.
Contoh adalah seperti berikut:
<html>
<head>
<meta charset="utf-8">
<title>123</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>Hasil keluaran:
(Belajar perkongsian video: tutorial video css)
Atas ialah kandungan terperinci Bagaimana untuk mencapai kesan tidak hilang apabila animasi berakhir dalam css3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!