DaunKoder
CSS

Belajar CSS: CSS Animation

Apa itu CSS Animation

CSS Animation merupakan fitur pada CSS yang mempermudah kita dalam membuat sebuah animasi. CSS Animation lebih banyak yang bisa disesuaikan dari pada CSS Transition. Kita bisa menganimasikan berbagai properti sekaligus. Konsep CSS Animation juga mirip CSS Transition. Dengan CSS Animation kita harus membuat terlebih dahulu animasi lalu menggunakannya pada elemen.

Cara untuk membuat animasi pun cukup mudah. Contohnya seperti ini:

@keyframes bounce {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(250px);
  }
}

bounce merupakan nama animasi. Blok deklarasi from berisi properti-properti yang akan diterapkan saat animasi pertama kali dijalankan sedangkan to berisi properti-properti yang akan diterapkan saat animasi berakhir. Kita juga bisa menggunakan persentase untuk menentukan animasi:

@keyframes color-blink {
  0% {
    background-color: coral;
  }

  25% {
    background-color: darkslategray;
  }

  50% {
    background-color: fuchsia;
  }

  75% {
    background-color: lawngreen;
  }

  100% {
    background-color: orange;
  }
}

Properti pada blok-blok deklarasi 0%-100% akan diterapkan saat proses animasi berada pada persentase tersebut. 0% saat animasi pertama kali dijalankan sedangkan 100% saat animasi berakhir.

Agar animasi digunakan pada elemen kita bisa menggunakan properti-properti berikut:

  • animation-name, nama animasi
  • animation-duration, durasi animasi

Contoh:

.bounce-box {
  animation-name: bounce;
  animation-duration: 1s;
}

Properti-properti lain untuk mengatur animasi:

  • animation-timing-function, timing function yang digunakan
  • animation-delay, waktu sebelum animasi dijalankan
  • animation-iteration-count, banyaknya pengulangan animasi yang dilakukan bisa angka atau infinite agar animasi berjalan terus. Default 1.
  • animation-direction, arah jalan animasi
  • animation-fill-mode, bagaimana properti-properti animasi diterapkan di luar animasi
  • animation-play-state, jika berisi running animasi akan berjalan dan jika paused animasi tidak dijalankan.

Properti-properti tersebut dapat diringkas dengan shorthand animation.

animation: name | duration | timing-function | delay | iteration-count | direction | fill-mode |
  play-state|;

Contoh Warna Berkedip

Berikut ini animasi warna latar belakang yang berkedip:

animation-direction

animation-direction mengatur arah jalan animasi. Properti ini dapat diisi dengan:

  • normal, animasi dijalankan dari awal sampai akhir
  • reverse, animasi dijalankan dari akhir sampai awal
  • alternate, animasi dijalankan dari awal sampai akhir kemudian dijalankan kembali dari akhir sampai awal
  • alternate-reverse, animasi dijalankan dari akhir sampai awal kemudian dijalankan dari awal sampai akhir

Untuk lebih memahaminya kalian bisa melihat contoh berikut.

animation-fill-mode

Properti ini mengatur bagaimana properti-properti animasi diterapkan di luar animasi. Dapat diisi dengan:

  • none, properti dalam animasi tidak akan diterapkan di luar animasi
  • backwards, properti dalam animasi akan diterapkan sebelum animasi dimulai (delay)
  • forwards, properti dalam animasi akan diterapkan setelah animasi selesai
  • both, gabungan dari backwards dan forwards.

Untuk lebih memahaminya kalian bisa melihat contoh di bawah ini.

Kesimpulan

CSS animation itu mudahkan. Kalian bisa mempelajarinya lebih lanjut di referensi di bawah. Semoga blog saya bermanfaat. Terima kasih.

Referensi