transition là gì?
transition giúp cho việc chuyển đổi từ trạng thái này sang trạng thái khác được mượt mà hơn.
Ứng dụng của transition rất lớn, như việc sử dụng hiệu ứng cho các button khi hover, các box item sản phẩm, hay cả việc viết các chuyển động ...
Cấu trúc cơ bản
tag {
transition: property time;
}
| Giá trị | VD | Mô tả |
|---|---|---|
| property | width height color opacity ... |
Là thuộc tính của CSS |
| time | 0.3s | Là thời gian của việc chuyển trạng thái |
Cách sử dụng
HTML viết:
<!DOCTYPE HTML> <html> <head></head> <body> <p>Hover me!</p> </body> </html>
CSS viết - khi chưa sử dụng transition:
p {
background-color: #ffcccc;
height: 50px;
width: 100px;
}
Hiển thị trình duyệt:
Hover me!
Bây giờ ta sẽ làm vài ví dụ về việc sử dụng transition nhé:
TRANSITION VỚI CHIỀU CAO
p {
background-color: #ffcccc;
height: 50px;
transition: height 0.4s;
width: 100px;
}
p:hover {
height: 50px;
}
Hiển thị trình duyệt:
Hover me!
Di chuyển chuột vào "Hover me!" ta sẽ thấy box được thay đổi chiều cao một cách từ từ.
TRANSITION VỚI CHIỀU RỘNG
p {
background-color: #ffcccc;
height: 50px;
transition: width 0.4s;
width: 100px;
}
p:hover {
width: 250px;
}
Hiển thị trình duyệt:
Hover me!
Di chuyển chuột vào "Hover me!" ta sẽ thấy chiều rộng box sẽ được thay đổi.
TRANSITION VỚI BACKGROUND
p {
background-color: #ffcccc;
height: 50px;
transition: background-color 0.4s;
width: 100px;
}
p:hover {
background-color: #ffffcc;
}
Hiển thị trình duyệt:
Hover me!
Di chuyển chuột vào "Hover me!" ta sẽ thấy background của box sẽ được thay đổi.
TRANSITION VỚI TẤT CẢ CÁC GIÁ TRỊ
p {
background-color: #ffcccc;
height: 50px;
transition: all 0.4s;
width: 100px;
}
p:hover {
background-color: #ffffcc;
height: 100px;
width: 250px;
}
Hiển thị trình duyệt:
Hover me!
Di chuyển chuột vào "Hover me!" ta sẽ thấy background, chiều rộng, chiều cao của box sẽ được thay đổi.
Đó là một trong những ví dụ cơ bản nhất, giúp bạn hiểu cách sử dụng transition như thế nào, với kiến thức nhỏ trên, cộng với sự sáng tạo của riêng bạn, bạn hoàn toàn có thể sáng tạo nhiều hiệu ứng chuyển động khác nhau, tất nhiên transition còn rất nhiều tính năng khác, bạn có thể tìm hiểu thêm tại tham khảo transition