Pengenalan Animasi CSS3

Oleh Gendis Widodari

Melalui kelas ini, kamu diajak untuk:

  • Mengenal fungsi dan keunggulan animasi di CSS3
  • Mengidentifikasi komponen-komponen wajib animasi di CSS3

Tentang Animasi

Animasi adalah properti CSS yang memungkinkan elemen berubah dari satu style ke style lainnya secara bertahap. Dengan menggunakan animasi, kita bisa mengubah elemen CSS sebanyak yang kita mau, sesuai dengan kebutuhan.

Keunggulan Animasi di CSS

Menggunakan animasi di CSS memiliki beberapa keuntungan, dua di antaranya adalah:

  • Kita tidak perlu menggunakan Javascript (JS), cukup dengan menggunakan CSS
  • Animasi di CSS tidak memakan beban yang tinggi, cocok untuk sistem load yang moderat

Komponen Animasi

Animasi di CSS terdiri dari dua komponen wajib, yakni keyframes dan selector CSS.

Keyframes
Keyframes, menggunakan sintaksis @keyframes, adalah spesifikasi yang digunakan untuk mengatur animasi.
Selector CSS
Selector CSS, baik id maupun class, merujuk pada elemen yang akan diberikan animasi (sebagaimana telah diatur dalam @keyframes).

Selayang Pandang

  • Animasi adalah properti CSS yang tidak memerlukan susunan kode Javascript untuk membuat style dari suatu elemen berubah ke style lainnya pada waktu tertentu.
  • Animasi di CSS memiliki dua komponen wajib, yaitu keyframes dan selector CSS (class atau id).

Kuis

Apa sintaksis yang digunakan untuk komponen keyframes?

Selamat, Anda telah menyelesaikan pelajaran ini
Klik untuk menyelesaikan