Transisi dan Animasi CSS

Petik.net - Transisi dan Animasi CSS adalah teknik yang digunakan untuk memberikan efek transisi atau animasi pada halaman web. Dalam Transisi dan Animasi CSS, kita dapat menggunakan beberapa property CSS seperti transition, animation, keyframes, dan transform.

Transisi CSS

Transisi CSS adalah teknik yang digunakan untuk memberikan efek perubahan pada sebuah elemen pada halaman web. Transisi dapat digunakan untuk memberikan efek perubahan warna, ukuran, posisi, dan property lainnya pada elemen tersebut. Property transition digunakan untuk menentukan efek transisi pada elemen tertentu.

Contoh penggunaan property transition pada elemen button:

button {
  background-color: #ffffff;
  color: #000000;
  transition: background-color 0.5s ease;
}

button:hover {
  background-color: #000000;
  color: #ffffff;
}

Pada contoh di atas, kita menggunakan property transition pada button untuk memberikan efek perubahan warna latar belakang saat tombol dihover. Transition akan berlangsung selama 0.5s dengan menggunakan timing function ease.

Animasi CSS

Animasi CSS adalah teknik yang digunakan untuk memberikan efek animasi pada elemen pada halaman web. Animasi dapat digunakan untuk memberikan efek pergerakan, perubahan ukuran, perubahan posisi, dan property lainnya pada elemen tersebut. Property animation digunakan untuk menentukan efek animasi pada elemen tertentu.

Contoh penggunaan property animation pada elemen img:

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

img {
  animation: spin 2s linear infinite;
}

Pada contoh di atas, kita menggunakan keyframes spin untuk membuat animasi memutar pada elemen img. Animasi akan berlangsung selama 2s dengan menggunakan timing function linear dan akan berulang terus-menerus (infinite).

Keyframes CSS

Keyframes CSS digunakan untuk mendefinisikan frame atau posisi dari animasi pada halaman web. Keyframes digunakan bersama dengan property animation untuk menentukan frame atau posisi dari animasi yang akan digunakan. Pada keyframes, kita dapat menentukan beberapa frame atau posisi yang akan digunakan selama animasi.