Transition CSS là gì? Hướng dẫn chi tiết cách tạo hiệu ứng mượt mà

Transition CSS là gì?

Transition CSS là một tính năng cho phép các nhà phát triển web tạo ra hiệu ứng chuyển đổi mượt mà giữa các trạng thái khác nhau của phần tử khi có sự thay đổi về thuộc tính CSS.

Ví dụ, khi thay đổi màu nền từ đen sang trắng, nếu không sử dụng transition thì màu sắc sẽ thay đổi ngay lập tức. Ngược lại, nếu áp dụng transition, sự thay đổi này sẽ diễn ra từ từ, theo tốc độ và thời gian được thiết lập.

Cú pháp transition trong CSS

transition: [property] [duration] [timing function] [delay]; 

Trong đó:

• transition-property: Thuộc tính cần áp dụng hiệu ứng.
• transition-duration: Thời gian thực hiện hiệu ứng.
• transition-timing-function: Đường cong tốc độ hiệu ứng.
• transition-delay: Độ trễ trước khi hiệu ứng bắt đầu.

Ví dụ cơ bản về transition

Click Me!
  

Khi người dùng hover vào phần tử, các thuộc tính như chiều cao, màu nền và đường viền sẽ thay đổi theo hiệu ứng chuyển tiếp.

Lợi ích của transition CSS trong thiết kế web

• Tạo trải nghiệm mượt mà: Giúp các chuyển đổi trên trang trở nên tự nhiên, dễ quan sát.
• Tăng tương tác: Làm cho các phần tử như nút, hình ảnh trở nên sinh động hơn khi có phản hồi trực quan.
• Cải thiện khả năng sử dụng: Giúp người dùng dễ hiểu mối quan hệ giữa các thành phần trên giao diện.

Các thuộc tính chính của transition CSS

Transition CSS gồm 4 thuộc tính cốt lõi giúp kiểm soát hiệu ứng chuyển đổi:

transition-property

Cú pháp:

transition-property: none | all | ; 

• none: Không có hiệu ứng chuyển tiếp.
• all: Áp dụng cho tất cả các thuộc tính có thể thay đổi.
• : Chỉ định cụ thể một hoặc nhiều thuộc tính.

Ví dụ:

.box { transition-property: width, height, background-color; transition-duration: 2s; transition-timing-function: ease-in-out; } 

transition-duration

Cú pháp:

transition-duration: ; 

• Giá trị thời gian có thể dùng đơn vị s (giây) hoặc ms (mili giây).
• Có thể khai báo nhiều thời gian, phân tách bằng dấu phẩy nếu áp dụng cho nhiều thuộc tính.

Ví dụ:

transition-duration: 4s; 

Hiệu ứng sẽ kéo dài 4 giây.

transition-timing-function

Cú pháp:

transition-timing-function: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(n, n, n, n); 

• ease: (mặc định) Bắt đầu chậm, nhanh ở giữa, và chậm ở cuối.
• linear: Diễn ra với tốc độ đều.
• ease-in: Bắt đầu chậm, nhanh dần.
• ease-out: Bắt đầu nhanh, chậm dần.
• ease-in-out: Chậm ở đầu và cuối.
• cubic-bezier: Tuỳ chỉnh đường cong hiệu ứng.

Ví dụ:

transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55); 

Cho hiệu ứng phức tạp với cảm giác "bật" khi kết thúc.

transition-delay

Cú pháp:

transition-delay: ; 

• Thiết lập khoảng thời gian chờ trước khi hiệu ứng bắt đầu.
• Có thể chỉ định nhiều giá trị nếu áp dụng cho nhiều thuộc tính.

Ví dụ:

transition-delay: 3s; 

Hiệu ứng chỉ bắt đầu sau 3 giây kể từ khi kích hoạt.

Viết tắt với thuộc tính shorthand transition

Để đơn giản hóa, bạn có thể sử dụng cú pháp viết tắt thay vì khai báo từng thuộc tính riêng lẻ.

Cú pháp shorthand:

transition: property duration timing-function delay; 

Ví dụ đầy đủ:

transition: all 4s ease-in-out 2s; 

Câu lệnh trên tương đương với:

transition-property: all; transition-duration: 4s; transition-timing-function: ease-in-out; transition-delay: 2s; 

Lưu ý:

• Các thuộc tính phải được viết đúng thứ tự.
• Shorthand chỉ hoạt động nếu các thuộc tính tương ứng được trình duyệt hỗ trợ.
• Nếu bạn chỉ khai báo một phần, phần còn lại sẽ được gán giá trị mặc định.

Sự kiện theo dõi quá trình chuyển tiếp

CSS transition cho phép bạn sử dụng JavaScript để theo dõi khi hiệu ứng bắt đầu hoặc kết thúc.

Hai thuộc tính sự kiện quan trọng:

• propertyName: Tên thuộc tính đang diễn ra hiệu ứng.
• elapsedTime: Thời gian đã trôi qua kể từ khi hiệu ứng bắt đầu (không bao gồm delay).

Ví dụ theo dõi với addEventListener():

el.addEventListener("transitionstart", function() { console.log("Bắt đầu hiệu ứng"); }); el.addEventListener("transitionend", function(e) { console.log(`Kết thúc hiệu ứng: ${e.propertyName}, thời gian: ${e.elapsedTime}s`); }); 

Lưu ý: transitionend sẽ không được kích hoạt nếu:

• Không có thuộc tính transition-property.
• transition-duration là 0 hoặc âm.
• Hiệu ứng bị gián đoạn bởi sự kiện khác.

Phát huy sức mạnh của Transition CSS

Transition CSS không chỉ giúp website mượt mà mà còn giúp giảm thiểu việc viết JavaScript.

So sánh ví dụ JavaScript vs CSS:

Với JavaScript:

element.style.transform = 'translateX(100px)'; 

Với CSS:

#element { transition: transform 0.5s; } #element:hover { transform: translateX(100px); } 

CSS đơn giản hơn, dễ bảo trì và hiệu suất tốt hơn trong hầu hết các trường hợp.

So sánh Transition CSS và Animation CSS

Transition và Animation đều tạo hiệu ứng cho giao diện web, nhưng chúng có nhiều điểm khác biệt quan trọng:

Lời kết

Transition CSS là công cụ mạnh mẽ giúp giao diện web trở nên mượt mà, chuyên nghiệp và thân thiện với người dùng mà không cần viết nhiều JavaScript.

Nắm vững các thuộc tính như transition-property, transition-duration, transition-timing-function và transition-delay sẽ giúp bạn làm chủ các hiệu ứng chuyển tiếp.

Hy vọng nội dung này sẽ giúp bạn áp dụng transition hiệu quả hơn để tạo ra trải nghiệm người dùng hiện đại và ấn tượng hơn trong các dự án web của mình.