Mengapa menggunakan transisi dan animasi css fade?

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 mentransisikan opacity elemen secara perlahan 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:hover2 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 - seperti kemudahan tetapi dengan nilai presisi yang berbeda

Tetapi jika Anda tidak memiliki preferensi apapun, 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 gunanya animasi di CSS?

Apa pentingnya menggunakan transisi CSS dan animasi CSS?

Apa itu fade dalam CSS animasi?

Haruskah saya menggunakan CSS transisi atau animasi?