CSS transitions được dùng tạo hiệu ứng mượt giữa các trạng thái của phần tử, cải thiện trải nghiệm người dùng.
- Transitions có thể tạo hiệu ứng cho các thuộc tính như màu sắc, kích thước và vị trí.
- Sử dụng bộ chọn và pseudo-classes (ví dụ: :hover) để kích hoạt transitions.
- Các thuộc tính transition quan trọng gồm transition-property, transition-duration, transition-timing-function, và transition-delay.
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
.box {
width: 100px;
height: 100px;
background-color: blue;
transition: background-color 0.5s;
}
.box:hover {
background-color: green;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div class="box"></div>
</body>
</html>
<!--Driver Code Ends-->
- Class .box định nghĩa một hình vuông <div> màu xanh dương, hiệu ứng transition cho background-color trong 0.5 giây.
- Khi người dùng di chuột vào <div>, :hover pseudo-class đổi màu nền sang xanh lá, kích hoạt transition.
CSS Transition Properties
Để tạo transition hiệu quả, bạn cần dùng ít nhất hai trong bốn thuộc tính chính. Đó là transition-property và transition-duration.
Dưới đây là cái nhìn chi tiết về từng thuộc tính:
. transition-property
Thuộc tính này cho phép bạn chọn thuộc tính CSS để tạo hiệu ứng trong quá trình chuyển đổi.
Syntax
transition-property: none | all | property | property1, property2, ..., propertyN;
- Values
- none được dùng để chỉ định không thuộc tính nào được chọn.
- all được dùng để chỉ định tất cả các thuộc tính được chọn.
- Chúng ta có thể chỉ định một property hoặc một tập hợp các thuộc tính cách nhau bằng dấu phẩy. Ví dụ: property1, property2, ..., propertyN.
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
.box {
width: 100px;
height: 100px;
background-color: blue;
transition-property: width;
transition-duration: 0.5s;
}
.box:hover {
width: 200px;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div class="box"></div>
</body>
</html>
<!--Driver Code Ends-->
In this example
- Class .box định nghĩa một hình vuông <div> với nền màu xanh dương.
- transition-property được đặt thành width, transition-duration là 0.5s để tạo hiệu ứng mượt khi width thay đổi.
- Khi di chuột vào <div>, pseudo-class :hover tăng width từ 100px lên 200px, kích hoạt transition.
. transition-duration
Thuộc tính này cho phép bạn xác định thời gian để hoàn thành transition từ thuộc tính CSS này sang thuộc tính khác.
Syntax
transition-duration: time;
Ở đây, time có thể tính bằng giây (s) hoặc mili giây (ms), dùng 's' hoặc 'ms' sau số (không có dấu ngoặc kép).
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends--gt;
<style>
.box {
width: 100px;
height: 100px;
background-color: blue;
transition-duration: 0.5s;
}
.box:hover {
background-color: green;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div class="box"></div>
</body>
</html>
<!--Driver Code Ends-->
In this example
- Class .box định nghĩa một hình vuông <div> màu xanh dương, thời gian transition là 0.5 giây.
- Khi di chuột vào <div>, pseudo-class :hover đổi màu nền thành xanh lá và transition diễn ra trong 0.5 giây.
. transition-timing-function
Thuộc tính này cho phép bạn xác định tốc độ thay đổi và cách thức thay đổi trong quá trình transition.
Ví dụ, thay đổi nhanh lúc đầu và chậm ở cuối.
Syntax
transition-timing-function: ease|ease-in|ease-out|ease-in-out|linear|HTML
step-start|step-end;
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
.box {
width: 100px;
height: 100px;
background-color: blue;
transition: background-color 0.5s;
transition-timing-function: ease-in-out;
}
.box:hover {
background-color: green;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div class="box"></div>
</body>
</html>
<!--Driver Code Ends-->
In this example
- Class .box định nghĩa hình vuông <div> màu xanh dương, hiệu ứng transition cho background-color trong 0.5 giây.
- transition-timing-function được đặt thành ease-in-out, khiến transition bắt đầu và kết thúc chậm, thay đổi nhanh ở giữa.
. transition-delay
Thuộc tính này cho phép bạn xác định thời gian chờ trước khi transition thực sự bắt đầu diễn ra.
Syntax
transition-delay: time;HTML
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
.box {
width: 100px;
height: 100px;
background-color: blue;
transition: background-color 0.5s;
transition-delay: 1s;
}
.box:hover {
background-color: green;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div class="box"></div>
</body>
</html>
<!--Driver Code Ends-->
In this example
- Class .box định nghĩa hình vuông <div> màu xanh dương, hiệu ứng transition cho background-color trong 0.5 giây.
- transition-delay được đặt thành 1s, gây ra một khoảng dừng 1 giây trước khi transition bắt đầu.
Shorthand Property
Bạn có thể kết hợp tất cả bốn thuộc tính transition vào một thuộc tính shorthand duy nhất, giúp đơn giản hóa mã và đảm bảo dễ đọc.
Syntax
transition: (property name) | (duration) | (timing function) | (delay);
- property: Thuộc tính CSS bạn muốn tạo hiệu ứng (ví dụ: width, background-color).
- duration: Thời gian transition hoàn thành (ví dụ: 0.5s cho nửa giây).
- timing-function: Đường cong tốc độ của transition (ví dụ: ease-in-out cho transition bắt đầu và kết thúc chậm).
- delay: Thời gian chờ trước khi bắt đầu transition (ví dụ: 1s cho độ trễ một giây).
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
.box {
width: 100px;
height: 100px;
background-color: blue;
transition: width 0.5s ease-in-out 1s;
}
.box:hover {
width: 200px;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div class="box"></div>
</body>
</html>
<!--Driver Code Ends-->
In this Example
- Shorthand transition kết hợp width, duration (0.5s), ease-in-out và delay (1s) vào một thuộc tính.
- Khi di chuột, width thay đổi mượt mà từ 100px thành 200px sau độ trễ 1 giây.
- ease-in-out khiến transition bắt đầu và kết thúc chậm, với giai đoạn giữa nhanh hơn.
Best Practices for CSS Transitions
- Sử dụng shorthand transition để đơn giản hóa và sắp xếp code của bạn.
- Chỉ áp dụng transitions cho các thuộc tính có thể tạo hiệu ứng như width, height hoặc background-color.
- Kiểm tra transitions trên nhiều thiết bị để đảm bảo hiệu suất ổn định và hiệu ứng mượt mà.
What are some common uses of CSS transitions?
- Tạo hiệu ứng hover trên các nút và liên kết.
- Thay đổi kích thước hoặc vị trí của các phần tử một cách mượt mà.
- Làm mờ dần các phần tử.
- Tạo hiệu ứng accordion hoặc toggle.
- Tăng cường tương tác người dùng với phản hồi trực quan.