Bagaimana Anda membuat efek fade di css?

Atas
Bawah
Kiri
Benar
Memudar
Perbesar
Putaran

W3. Kelas Animasi CSS

W3. CSS menyediakan kelas berikut untuk animasi

Animate Top

Slide kelas w3-animate-top dalam elemen dari atas (dari -300px ke 0)

Contoh

Animasi itu Menyenangkan

Animasikan Bawah

Kelas w3-animate-bottom meluncur dalam elemen dari bawah (dari -300px ke 0)

Contoh

Animasi itu Menyenangkan

Animasikan Kiri

Kelas w3-animate-left meluncur dalam elemen dari kiri (-300px ke 0)

Contoh

Animasi itu Menyenangkan

Animasi Kanan

Kelas w3-animate-right meluncur dalam elemen dari kanan (-300px ke 0)

Contoh

Animasi itu Menyenangkan

Memudar di Elemen

Kelas w3-animate-opacity menganimasikan opacity elemen dari 0 menjadi 1 dalam 0. 8 detik

Fade dalam elemen dengan kelas w3-animate-opacity

Perbesar Elemen

Kelas w3-animate-zoom menganimasikan elemen dari ukuran 0 hingga 100%.

Perbesar elemen dengan kelas w3-animate-zoom

Elemen Putar

Kelas w3-spin memutar elemen 360 derajat

Memudar Tak Terbatas

Kelas w3-animate-fading memudar masuk dan keluar elemen setiap 10 detik (terus menerus)

Animasi Fade In dan Out

Pudar Semua

Contoh

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 -

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 yang memudar di CSS?

Bagaimana cara membuat div muncul perlahan?

Bagaimana cara membuat efek fade di JavaScript?

Apa efek fade?