Khi một thuộc tính CSS thay đổi (ví dụ: màu nền, kích thước, độ mờ…), trình duyệt thường thay đổi ngay lập tức. Điều đó khiến giao diện trông “thô” và thiếu cảm giác mượt mà.
CSS transition giúp bạn tạo hiệu ứng chuyển đổi nhẹ nhàng giữa các trạng thái – làm cho trải nghiệm người dùng trở nên hiện đại và tinh tế hơn.
1. Cách sử dụng transition
Cú pháp cơ bản:
transition: [thuộc-tính] [thời-gian] [hiệu-ứng] [độ-trễ];
Ví dụ:
button {
background-color: #3498db;
color: white;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #2ecc71;
}
Khi rê chuột vào, màu nền chuyển từ xanh dương → xanh lá một cách mượt mà trong 0.3 giây.
2. Các thành phần của transition
| Thành phần | Ý nghĩa |
|---|---|
thuộc-tính | Tên thuộc tính cần hiệu ứng (ví dụ: background-color) |
thời-gian | Thời gian chuyển (ví dụ: 0.5s, 300ms) |
hiệu-ứng | Kiểu chuyển động (ease, linear, ease-in, v.v.) |
độ-trễ (tùy chọn) | Chờ bao lâu mới bắt đầu chuyển động |
3. Các giá trị easing phổ biến
| Tên easing | Hiệu ứng |
|---|---|
ease (mặc định) | Chuyển động mượt, chậm lại ở cuối |
linear | Tốc độ đều nhau từ đầu đến cuối |
ease-in | Bắt đầu chậm, tăng tốc về sau |
ease-out | Bắt đầu nhanh, chậm dần ở cuối |
ease-in-out | Chậm ở cả đầu và cuối |
4. Dùng transition cho nhiều thuộc tính
Bạn có thể liệt kê:
transition: background-color 0.3s, transform 0.4s ease-in;
Hoặc dùng tất cả:
transition: all 0.3s ease;
Lưu ý: dùng
allsẽ ảnh hưởng đến mọi thuộc tính, nên chỉ nên dùng khi cần.
5. Thực hành: làm nút mượt mà khi hover
style.css
button {
padding: 12px 24px;
font-size: 16px;
color: white;
background-color: #e74c3c;
border: none;
border-radius: 6px;
transition: background-color 0.3s ease, transform 0.2s ease;
}
button:hover {
background-color: #c0392b;
transform: scale(1.05);
}
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bài 20 – Transition</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<button>Bấm tôi đi</button>
</body>
</html>
6. Một số ví dụ khác
a. Hiệu ứng opacity
.card {
opacity: 0.7;
transition: opacity 0.4s ease;
}
.card:hover {
opacity: 1;
}
b. Đổi màu chữ khi hover
a {
color: #333;
transition: color 0.3s;
}
a:hover {
color: #e67e22;
}
7. Ghi nhớ
| Thành phần | Ví dụ |
|---|---|
transition-property | background-color, opacity, transform |
transition-duration | 0.3s, 500ms |
transition-timing-function | ease, linear, ease-in-out |
transition-delay | 0s, 0.2s |
Thảo luận