pengenalan @keyframes

A.pendahuluan
                          Assalamualikum wr.wb

  oke bertemu lagi dengan saya kali ini saya akan sharing tentang pengenalan @keyframes

B. latar belakang

    ada yang tahu kah apa itu @keyframes, @keyframes itu komponen utama dalam animasi di css untuk pembuatan animasi pake css/html.

C. maksud dan tujuan

   ingin tahu apa itu @keyframes

D. Waktu pelaksanaan

         2jam

E. pemahaman

   Pengenalan @keyframes

Komponen utama dari animasi CSS adalah @keyframes, aturan CSS di mana sebuah animasi didefinisikan. Bayangkan @keyframes sebagai tahapan-tahapan yang merangkai timeline pada animasi. Di dalam @keyframes, anda dapat menentukan tahapan ini, dengan masing-masing memiliki sebuah style yang berbeda.

Selanjutnya, agar animasi berjalan, anda perlu mengaitkan @keyframes tersebut ke dalam sebuah selector. Selector secara bertahap akan mengurai semua kode yang terkandung di dalam @keyframes dan mengubah style awal menjadi style baru, berdasarkan tahapan-tahapan yang telah ditentukan.
@keyframes

Di sini kita akan mengatur tahapan animasi. Properti-properti di dalam @keyframes kita adalah:

    Nama animasi (tutsFade dalam contoh ini).
    Tahapan: 0%-100%; dari (sama dengan 0%) dan hingga (sama dengan 100%).
    Style CSS: style yang anda ingin aplikasikan dalam setiap tahapannya.

Contoh:

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

atau:

   
@keyframes tutsFade {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

atau dengan shorthand:

   
@keyframes tutsFade {
  to {
    opacity: 0;
  }
}

Kode di atas akan menerapkan sebuah efek transisi terhadap opacity dari sebuah elemen, dari opacity: 1 menjadi opacity: 0. Masing-masing dari contoh di atas akan menghasilkan hasil akhir yang sama.

 F. Alat dan bahan

     aplikasi sublime
      laptop

G.referenesi

    https://webdesign.tutsplus.com/id/tutorials/a-beginners-introduction-to-css-animation--cms-21068

H. penutup

     oke sekian dari saya bila da kesalahan saya minta maaf, semoaga bermanfaat.

                                  Wassalamualaikum wr.wb