Bagaimana cara memudarkan animasi di css?

Keterangan

Gambar datang atau menyebabkan datang secara bertahap ke dalam atau keluar dari tampilan, atau bergabung ke bidikan lain

Sintaksis

@keyframes fadeIn {
   0% {opacity: 0;}
   100% {opacity: 1;}
} 

Parameter

• Transform - Transform berlaku untuk transformasi 2d dan 3d ke elemen

• Opacity - Opacity berlaku untuk elemen untuk membuat tembus cahaya

Contoh

   
      
   

   
   
      
      Reload page
      
      
      
   

Keluaran

Ini akan menghasilkan hasil berikut -

Jika Anda pernah menggunakan perangkat lunak pengeditan video — apakah itu Windows Movie Maker atau Adobe Premiere Pro — kemungkinan besar Anda sudah familiar dengan transisi video fade-in dan fade-out. Mereka sangat efektif untuk menciptakan nuansa yang bagus dan halus, dan tidak ada alasan mengapa Anda tidak dapat memilikinya di gudang senjata Anda saat Anda memprogram aplikasi web.

Dengan dirilisnya CSS3, kini Anda dapat membuat animasi CSS asli untuk menganimasikan elemen HTML Anda

Salah satu animasi yang bisa Anda buat dengan CSS adalah animasi fade-in, di mana elemen perlahan akan diubah dari tidak terlihat menjadi terlihat

Berikut kode untuk CSS fade-in animation. Saya akan menjelaskan kode di bawah ini

.fade-in:hover {
  animation-name: FadeIn;
  animation-duration: 3s;
  transition-timing-function: linear;
}

@keyframes FadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-moz-keyframes FadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes FadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-o-keyframes FadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-ms-keyframes FadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

Pertama, aturan CSS diterapkan ke kelas semu fade-in:hover sehingga animasi akan berjalan saat pengguna mengarahkan kursor ke elemen dengan kelas

Animasi yang ingin kita buat adalah animasi fade-in, dan dapat dibuat dengan perlahan mentransisikan opacity elemen dari 0 ke 1

Animasi di CSS dibuat menggunakan aturan @keyframes, jadi kami memasukkan aturan di dalam @keyframes sebagai berikut

• 0% {opacity:0;} Saat animasi dimulai pada 0%, setel opacity ke nol

• <div
    class="fade-in"
    style="background-color: aqua; border-radius: 5px; padding: 10px"
  >
    <h1>Hover on me and see the animation</h1>
  </div>
  

  0 Saat animasi berakhir pada

  <div
    class="fade-in"
    style="background-color: aqua; border-radius: 5px; padding: 10px"
  >
    <h1>Hover on me and see the animation</h1>
  </div>
  

  1, atur opacity menjadi satu

Aturan di atas sudah cukup untuk membuat animasi fade-in. Awalan di depan aturan keyframe di atas juga ditambahkan untuk mendukung browser lama

Selanjutnya, aturan @keyframes diterapkan ke kelas

<div
  class="fade-in"
  style="background-color: aqua; border-radius: 5px; padding: 10px"
>
  <h1>Hover on me and see the animation</h1>
</div>

<div
  class="fade-in"
  style="background-color: aqua; border-radius: 5px; padding: 10px"
>
  <h1>Hover on me and see the animation</h1>
</div>

Properti

<div
  class="fade-in"
  style="background-color: aqua; border-radius: 5px; padding: 10px"
>
  <h1>Hover on me and see the animation</h1>
</div>

Properti

<div
  class="fade-in"
  style="background-color: aqua; border-radius: 5px; padding: 10px"
>
  <h1>Hover on me and see the animation</h1>
</div>

<div
  class="fade-in"
  style="background-color: aqua; border-radius: 5px; padding: 10px"
>
  <h1>Hover on me and see the animation</h1>
</div>

Properti terakhir fade-in:hover_1 adalah untuk mengontrol kecepatan percepatan efek animasi. Nilai fade-in:hover_2 berarti animasi akan dilakukan dengan kecepatan konstan

Anda dapat memasukkan nilai lain di fade-in:hover_1 seperti

• fade-in:hover_4 - animasi akan dipercepat menjelang pertengahan transisi lalu melambat lagi
• fade-in:hover_5 - animasi dimulai perlahan dan kemudian dipercepat
• fade-in:hover_5 - animasi dimulai dengan cepat dan kemudian melambat hingga akhir
• fade-in:hover_7 - suka kemudahan tetapi dengan nilai presisi yang berbeda

Tetapi jika Anda tidak memiliki preferensi, maka fade-in:hover2 akan menjadi pilihan yang baik karena animasi akan memiliki kecepatan transisi yang konstan

Anda dapat menambahkan kelas

<div
  class="fade-in"
  style="background-color: aqua; border-radius: 5px; padding: 10px"
>
  <h1>Hover on me and see the animation</h1>
</div>

Mari kita uji animasi yang telah kita buat di atas dalam elemen 00. Saya akan menambahkan warna latar belakang dan bantalan untuk membuat elemen lebih besar

Apa itu fade di CSS?

Apa itu fade in animation?

Bagaimana cara membuat penundaan animasi di CSS?

Bagaimana cara memudarkan elemen saat memuat halaman?