Bagaimana untuk Mencapai Kesan Fade-Out dalam CSS3: Animasi Kerangka Utama lwn. Peralihan?

Peralihan CSS3 - Kesan Fade out

Dalam CSS3, mencapai kesan fade out boleh dicapai melalui penggunaan animasi bingkai utama. Walau bagaimanapun, adalah penting untuk memastikan tetapan animasi dikonfigurasikan dengan betul untuk mencapai kesan yang diingini.

Dalam kod yang disediakan, animasi slaid naik tidak berfungsi kerana sifat teratas sedang dianimasikan, yang akan menggerakkan elemen secara menegak di luar halaman. Untuk mencapai kesan pudar, sifat kelegapan hendaklah dianimasikan sebaliknya. Berikut ialah versi kod yang dikemas kini:

<code class="css">@keyframes slideup {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

.dummy-wrap {
  animation: slideup 2s;
  -moz-animation: slideup 2s;
  -webkit-animation: slideup 2s;
  -o-animation: slideup 2s;
}</code>

Sebagai alternatif, pendekatan yang lebih ringkas menggunakan peralihan CSS3 tersedia:

<code class="css">.visible {
  visibility: visible;
  opacity: 1;
  transition: opacity 2s linear;
}

.hidden {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 2s, opacity 2s linear;
}</code>

Untuk memadamkan elemen menggunakan pendekatan ini, cuma tambah kelas tersembunyi kepada elemen:

<code class="css"><div class="success-wrap successfully-saved visible">Saved</div></code>

Ini akan mengalihkan elemen kepada kelegapan: 0 selama 2 saat, menghasilkan kesan pudar. Ambil perhatian bahawa keterlihatan: tersembunyi ditambah dengan kelewatan, membolehkan animasi pudar selesai sebelum elemen disembunyikan.

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Kesan Fade-Out dalam CSS3: Animasi Kerangka Utama lwn. Peralihan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!