pengenalan animasi

A.pendahuluan
                          Assalamualikum wr.wb

  oke bertemu lagi dengan saya kali ini saya akan sharing tentang pengenalan animasi

B. latar belakang

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

C. maksud dan tujuan

   ingin tahu apa itu animasi

D. Waktu pelaksanaan

         4jam

E. pemahaman

   Pengenalan animasi

       1.  Animasi

Properti animasi digunakan untuk memanggil @keyframes ke dalam sebuah selector CSS. Animasi dapat memiliki beberapa properti sebagai berikut:

    animation-name: nama @keyframes (ingat kita memilih tutsFade).
    animation-duration: durasi animasi, total durasi dari animasi dari awal hingga akhir.
    animation-timing-function: mengatur kecepatan animasi ( linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier ).
    animation-delay: durasi tunda ebelum animasi kita mulai.
    animation-iteration-count: jumlah penambahan dalam animasi.
    animation-direction: memberi anda kemampuan untuk mengubah arah loop, dari awal hingga akhir, atau dari akhir hingga awal, atau keduanya.
    animation-fill-mode: menentukan style yang akan di terapkan ke dalam elemen ketika animasi kita selesai ( none | forwards | backwards | both )

Contohnya:
   
.element {
  animation-name: tutsFade;
  animation-duration: 4s;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-direction: alternate;
}

atau dengan menggunakan shorthand:
   
.element {
  animation: tutsFade 4s 1s infinite linear alternate;
}

Kode di atas akan mencipatakan efek kedip, dengan waktu tunda 1 detik, 4 detik total durasi animasi, dengan arah berbalik dan putaran loop tanpa batas.

F. Alat dan bahan


       laptop
       aplikasi sublime

   
G. Referensi


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




H. Penutup

     oke sekian dari saya bila ada kesalahan saya minta maaf, semoga bermanfaat

                                              Wassalamualikum wr.wb