belajar css part3

Pada bagian ketiga ini, kita akan belajar tentang cara menambahkan interaksi dan animasi pada halaman web menggunakan CSS.

1. Pseudo-class dan Pseudo-element
   CSS menyediakan pseudo-class dan pseudo-element yang dapat digunakan untuk menambahkan interaksi pada elemen HTML. Pseudo-class digunakan untuk menentukan kondisi elemen seperti saat di-hover atau saat diklik, sedangkan pseudo-element digunakan untuk menentukan bagian tertentu dari elemen seperti ::before atau ::after.
   contoh:

   a:hover {
     color: red;
   }
   
   p::first-letter {
     font-size: 20px;
   }

2. Transitions
   CSS menyediakan transitions yang dapat digunakan untuk menambahkan animasi pada perubahan gaya elemen HTML. Transitions menentukan bagaimana gaya akan berubah secara bertahap dari satu ke yang lain.
   
   contoh:

   button {
     transition: background-color 1s;
   }
   
   button:hover {
     background-color: red;
   }

3. Animations
   CSS juga menyediakan animations yang dapat digunakan untuk menambahkan animasi lebih kompleks pada halaman web. Animations menentukan bagaimana elemen akan bergerak atau berubah selama periode waktu tertentu.
   
   contoh:

   @keyframes example {
     from {background-color: red;}
     to {background-color: yellow;}
   }
   
   div {
     animation: example 5s infinite;
   }

   Itulah beberapa cara untuk menambahkan interaksi dan animasi pada halaman web menggunakan CSS. Dengan menguasai teknik-teknik tersebut, Anda dapat membuat halaman web yang lebih interaktif dan menarik.
   

   Namun ingatlah bahwa penambahan interaksi dan animasi yang berlebihan dapat mengurangi kinerja halaman web dan mengganggu pengalaman pengguna.

   
   Selamat belajar dan semoga sukses dalam pembuatan halaman web Anda!