Transisi dan Efek Hover

Termasuk bagian Menguasai CSS dalam perjalanan HTML di Coddy. Pelajaran 24 dari 43.

Transisi memungkinkan kamu mengubah property secara bertahap seiring waktu, bukan secara langsung.

selector {
  transition: property duration timing-function delay;
}

property: Property CSS yang ingin kamu transisikan (misalnya, background-color, width, opacity).
duration: Waktu yang diperlukan hingga transisi selesai (misalnya, 1s untuk 1 detik).

timing-function: Bagaimana transisi berlangsung (misalnya, linear, ease, ease-in).
delay: Berapa lama menunggu sebelum memulai transisi (opsional).

Contohnya:

.button {
  background-color: green;
  transition: background-color 0.3s ease;
}
.button:hover {
  background-color: blue;
}

Saat kamu mengarahkan kursor ke tombol, warna latar belakangnya akan berubah dari hijau menjadi biru dalam 0.3 detik.

Tantangan

Mudah

Tambahkan property transition ke .card agar perubahan warna latar belakang dan box-shadow berlangsung mulus selama 0.4 detik dengan fungsi pengaturan waktu ease.

Coba sendiri

<!DOCTYPE html>
<html>
<head>
  <style>
    /* Write your CSS here */
    .card {
      background-color: white;
      padding: 10px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }
    
  </style>
</head>
<body>
  <div class="card">
    Hover over me!
  </div>
</body>
</html>