Transisi dan Efek Hover

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

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

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

property: Properti 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 selama 0.3 detik.

Untuk menerapkan transisi pada lebih dari satu properti, daftarkan semuanya dalam satu deklarasi transition, pisahkan dengan koma (baris transition kedua akan menggantikan baris pertama):

transition: width 0.3s ease, opacity 0.3s ease;

Tantangan

Mudah

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

Lalu tambahkan aturan .card:hover yang mengubah warna latar belakang dan box-shadow kartu, sehingga ada sesuatu yang dapat dianimasikan oleh transisi.

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>