Chuyển tiếp và hiệu ứng hover

Thuộc phần Thành thạo CSS trong hành trình HTML của Coddy. Bài học 24 trên 43.

Hiệu ứng chuyển tiếp giúp bạn thay đổi một thuộc tính mượt mà theo thời gian thay vì thay đổi ngay lập tức.

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

thuộc tính: Thuộc tính CSS bạn muốn chuyển đổi (ví dụ: background-color, width, opacity).
thời lượng: Thời gian để quá trình chuyển đổi hoàn tất (ví dụ: 1s nghĩa là 1 giây).

timing-function: Cách hiệu ứng chuyển tiếp diễn ra (ví dụ: linear, ease, ease-in).
delay: Thời gian chờ trước khi bắt đầu hiệu ứng chuyển tiếp (không bắt buộc).

Ví dụ:

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

Khi bạn di chuột qua nút, màu nền của nút sẽ chuyển từ xanh lá sang xanh dương trong 0,3 giây.

Thử thách

Dễ

Thêm thuộc tính transition vào .card để màu nền và box-shadow thay đổi mượt mà trong 0.4 giây với hàm thời gian ease.

Tự làm thử

<!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>