Tutorial CSS: Membuat Animasi Fade-In dengan @keyframes

Home Coding HTML-CSS

Animasi pada website dapat dibuat dengan beberapa cara. Salah satunya yaitu dengan menggunakan HTML dan CSS. Salah satu "rule" CSS yang dapat digunakan yaitu "@keyframes".

Animasi dengan @keyframes terbentuk dengan mengubah suatu keadaan ke keadaan yang lain. Dalam proses animasi dengan menggunakan "rule" ini, tampilan dapat diubah beberapa kali.

Pada contoh berikut ditunjukkan bahwa proses animasi dideklarasi dengan nama "fadeIn". Pada saat animasi dimulai (0%) tingkat opacity (transparansi) yaitu 0 (tidak tampak) dan berakhir pada 1 (tampak utuh).

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

Setelah animasi selesai dibuat, selanjutnya penerapan animasi pada element dengan tinggi 100px, lebar 200px, dan warna-latar hitam. Nama animasi yang dijalankan adalah "fadeIn" yang sebelumnnya telah dideklarasikan, durasi animasi: 3 detik, dengan "animation-timing-function" adalah "ease".

      
        .rect-animate { 
          width: 200px;
          height: 100px;
          background-color: black;
          animation: fadeIn 3s ease; 
        }

Adapun pada bagian HTML, cukup dengan menerapkan class pada tag seperti berikut ini.

      
        <div class="rect-animate"></div>

Dan Animasi telah selesai dibuat, animasi dapat anda lihat tepat dibawah ini. Animasi berawal dengan tidak tampil dan kemudian tampil secara sempurna 3 detik kemudian.

Perlu diperhatikan bahwa animasi berjalan sesaat setelah website dibuka. Jika animasi tidak berjalan sesuai dengan yang diinginkan, cobalah untuk memulai-ulang (refresh) halaman ini .

Jenis Animasi lain yang dapat dibuat dengan @keyframes dapat disni

Sekian, Semoga bermanfaat