Transition CSS là kỹ thuật giúp các thay đổi thuộc tính trên website trở nên mượt mà, tự nhiên hơn. Đây là một trong những tính năng đơn giản nhưng cực kỳ hiệu quả trong việc cải thiện trải nghiệm người dùng. Bài viết sẽ giúp bạn hiểu rõ bản chất của transition, cách sử dụng các thuộc tính như duration, timing-function, delay, cùng mẹo tối ưu hiệu ứng chuyển tiếp. Ngoài ra, bạn cũng sẽ biết cách phân biệt transition với animation và ứng dụng thực tế trong giao diện web.
Điểm chính cần nắm
- Transition CSS là gì?: Định nghĩa ngắn gọn về Transition CSS và vai trò của nó trong thiết kế giao diện.
- Tại sao transition lại được sử dụng nhiều trong thiết kế web hiện đại?: Nêu lý do transition được ưa chuộng nhờ cải thiện trải nghiệm người dùng và tăng tính tương tác.
- Thuộc tính của transition CSS: Bước đệm cho mọi hiệu ứng: Trình bày các thuộc tính cơ bản tạo nên hiệu ứng transition mượt mà.
- Các sự kiện đánh dấu quá trình chuyển tiếp: Giới thiệu các sự kiện như
transitionstart,transitionendđể xử lý logic theo quá trình chuyển đổi. - Phát huy sức mạnh của Transition CSS: Hướng dẫn cách kết hợp và tối ưu transition để tăng tính sinh động cho giao diện.
- Transition CSS và Animation CSS: “Anh em song sinh” nhưng khác biệt: So sánh điểm giống và khác nhau giữa Transition và Animation CSS.
- Vietnix – Giải pháp lưu trữ giúp website luôn mượt mà như hiệu ứng CSS: Giới thiệu giải pháp hosting tốc độ cao từ Vietnix hỗ trợ website vận hành mượt mà.
- FAQ: Giải đáp các câu hỏi thường gặp liên quan đến Transition CSS.
Transition CSS là gì?
Transition CSS là một tính năng giúp các nhà lập trình website có thể tạo ra các hiệu ứng chuyển đổi và điều khiển tốc độ của chúng ngay khi các thuộc tính trong CSS có sự thay đổi. Chẳng hạn như khi bạn muốn đổi màu của các phần tử từ đen sang trắng. Nếu như không có transition CSS, sự thay đổi sẽ diễn ra ngay lập tức. Tuy nhiên, nếu có áp dụng transition CSS, các thay đổi này sẽ diễn ra theo tốc độ và khoảng thời gian đã được định sẵn.
Cú pháp của transition CSS như sau:
transition: [property] [duration] [timing function] [delay];Trong đó:
- transition-property: hiệu ứng chuyển đổi
- transition-duration: thời gian hiệu ứng chuyển đổi
- transition-timing-function: tốc độ của hiệu ứng chuyển đổi trong khoảng thời gian
- transition-delay: độ trì hoãn khi hiệu ứng chuyển đổi
Ví dụ dưới đây thiết lập thuôc tính Transition CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transition CSS Example</title>
<style>
div {
padding: 4px;
text-align: center;
margin: 0 auto;
width: 100px;
height: 20px;
border: 5px solid #fdd98b;
background-color: #8ff1f5;
transition-property: all;
transition-duration: 0.3s;
}
div:hover {
width: 100px;
height: 100px;
background-color: #6fff00;
border: 10px double #b1b1b1;
cursor: pointer;
}
</style>
</head>
<body>
<div>Click Me!</div>
</body>
</html>Và kết quả khi bạn hover vào phần tử đó, size, background và cả border của phần đó sẽ được thay đổi theo giá trị của mã mà bạn viết.
Tại sao transition lại được sử dụng nhiều trong thiết kế web hiện đại?
Hiệu ứng transition mang lại khá nhiều lợi ích cho dự án trang website, một số ưu điểm thông thường là:
- Tạo trải nghiệm mượt mà cho người dùng: hiệu ứng chuyển đổi tạo ra các thay đổi trên trang web liền mạch, giúp người dùng dễ dàng điều hướng trang web mà không có bất kỳ phần tử nào có sự thay đổi đột ngột.
- Tăng sự tương tác: các hiệu ứng chuyển đổi khi người dùng tương tác với các phần tử (như button, liên kết hay hình ảnh) sẽ làm cho trang web trở nên sinh động và hấp dẫn hơn
- Cải thiện khả năng sử dụng: hiệu ứng chuyển đổi giúp người dùng dễ dàng hiểu được mối quan hệ giữa các phần tử trên trang web, từ đó cải thiện khả năng sử dụng và điều hướng.
Dù hiệu ứng CSS được xử lý ở phía trình duyệt, một nền tảng lưu trữ ổn định vẫn là yếu tố quan trọng để website tải nhanh, mượt mà. WordPress Hosting tại Vietnix được tối ưu sẵn cho hiệu suất và SEO, giúp mọi hiệu ứng – từ transition CSS đến toàn bộ nội dung – hiển thị liền mạch và đúng chuẩn trên mọi thiết bị.
TĂNG TỐC TỐI ĐA Với Hosting WORDPRESS
Nâng tầm website WordPress của bạn: Nhanh, ổn định và an toàn hơn
Thuộc tính của transition CSS: Bước đệm cho mọi hiệu ứng
| Thuộc tính | Mô tả |
| transition-property | Xác định tên các thuộc tính CSS nào sẽ có hiệu ứng chuyển đổi. |
| transition-duration | Xác định thời gian kéo dài của hiệu ứng chuyển đổi. Giá trị càng cao, thời gian chuyển đổi càng lâu và ngược lại |
| transition-timing-function | Sử dụng tốc độ của hiệu ứng chuyển đổi trong khoảng thời gian như ease, linear, cubic-bezier,.. |
| transition-delay | Thiết lập độ trễ trước khi hiệu ứng chuyển đổi bắt đầu. |
Chúng ta cùng bắt đầu tìm hiểu chi tiết về 4 thuộc tính này:
Transition-property
Cú pháp của thuộc tính transition-property:
transition-property: none | all | <property>;Trong đó:
- none: Không có thuộc tính nào được áp dụng hiệu ứng chuyển tiếp. Các thay đổi sẽ xảy ra đột ngột.
- all: Tất cả các thuộc tính có thể thay đổi sẽ được áp dụng hiệu ứng chuyển tiếp.
- <property>: Bạn liệt kê cụ thể các thuộc tính mà bạn muốn áp dụng hiệu ứng.
Lưu ý
Chỉ các <property> được liệt kê mới áp dụng hiệu ứng transition, còn các thuộc tính khác sẽ diễn ra ngay lập tức như bình thường.
Ví dụ: Mình sẽ đặt hiệu ứng chuyển đổi cho width (chiều rộng), height (chiều cao) và background (màu nền)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transition-Property Example</title>
<style>
.box {
width: 100px;
height: 100px;
margin: 0 auto;
background-color: rgb(95, 250, 255);
transition-property: width, height, background-color;
transition-duration: 2s;
transition-timing-function: ease-in-out;
transition-delay: 0s;
}
.box:hover {
width: 200px;
height: 200px;
cursor: pointer;
background-color: rgb(232, 255, 148);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>Kết quả: Khi bạn di chuột vào phần tử box, hiệu ứng transition-property sẽ được áp dụng, phần tử thay đổi cả chiều cao, chiều rộng và hình nền.
Transition-duration
Cú pháp của thuộc tính transition-duration:
transition-duration: <time>;- time: Thời gian kéo dài của hiệu ứng chuyển đổi, có thể sử dụng đơn vị giây (s) hoặc mili giây (ms). Bạn có thể liệt kê nhiều thời gian, chúng ngăn cách bởi dấu phẩy.
Lưu ý
Nếu bạn thiết lập khoảng thời gian bằng 0 thì sẽ không có hiệu ứng transition nào diễn ra.
Ví dụ: Mình đặt thuộc tính transition-duration có giá trị là 4s.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transition-Property Example</title>
<style>
.box {
width: 100px;
height: 100px;
margin: 0 auto;
background-color: rgb(248, 200, 154);
transition-property: height, background-color;
transition-duration: 4s;
transition-timing-function: ease-in-out;
transition-delay: 0s;
}
.box:hover {
height: 200px;
cursor: pointer;
background-color: #9cf7ab;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>Kết quả: Khi bạn di chuột đến phần tử box, hiệu ứng transition sẽ chạy và kéo dài trong 4s.
Transition-timing-function
Cú pháp của thuộc tính transition-timing-function:
transition-timing-function: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(n, n, n, n)Trong đó:
- ease(default): Hiệu ứng bắt đầu chậm, nhanh ở giữa và chậm lại khi kết thúc.
- linear: Hiệu ứng diễn ra với tốc độ không đổi.
- ease-in: Hiệu ứng bắt đầu chậm và nhanh dần về cuối.
- ease-out: Hiệu ứng bắt đầu nhanh và chậm lại về cuối.
- ease-in-out: Hiệu ứng bắt đầu và kết thúc chậm, nhanh ở giữa.
- cubic-bezier(n, n, n, n): Giá trị tùy chỉnh cho đường cong Bezier để điều chỉnh tốc độ chuyển đổi.
Lưu ý
cubic-bezier(x1 , y1 , x2 , y2) cho phép bạn định nghĩa các giá trị riêng trong hàm cubic-bezier. Giá trị x1 , x2 phải nằm trong khoảng từ 0 đến 1, hai giá trị y1 ,y2 có thể nằm ngoài khoảng từ 0 đến 1.
Ví dụ: Mình đặt thuộc tính transition-timing-duration có giá trị là cubic-bezier.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transition Example with Cubic Bezier</title>
<style>
.box {
width: 100px;
height: 100px;
margin: 0 auto;
background-color: rgb(160, 228, 255);
transition-property: width, height, background-color;
transition-duration: 3s;
transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
transition-delay: 0s;
}
.box:hover {
width: 200px;
height: 200px;
cursor: pointer;
background-color: rgb(241, 250, 160);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Kết quả: Khi bạn di chuột đến phần tử box, hiệu ứng transition sẽ được kích hoạt, phần tử sẽ chuyển động thay đổi chiều rộng, chiều cao, màu nền bắt đầu nhanh hơn, sau đó chậm lại và bật lại một chút trước khi ổn định.
Transition-delay
Cú pháp của thuộc tính transition-delay:
transition-delay: <time>;- time: Độ trễ trước khi hiệu ứng chuyển đổi bắt đầu, có thể sử dụng đơn vị giây (
s) hoặc mili giây (ms). Bạn có thể liệt kê nhiều thời gian, ngăn cách nhau bởi dấu phẩy.
Ví dụ: Mình đặt transition-delay có giá trị time là 3s.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transition Example with Cubic Bezier</title>
<style>
.box {
width: 100px;
height: 100px;
margin: 0 auto;
background-color: rgb(160, 228, 255);
transition-property: width, height, background-color;
transition-duration: 3s;
transition-timing-function: ease-in-out;
transition-delay: 3s;
}
.box:hover {
width: 200px;
height: 200px;
cursor: pointer;
background-color: rgb(160, 250, 187);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Kết quả: Khi bạn di chuột vào phần tử box, hiệu ứng transition sẽ không thực hiện ngay lập tức mà phải chờ đợi 3 giây mới bắt đầu.
Lưu ý
- Thuộc tính transition-delay chỉ có tác dụng khi được sử dụng cùng với các thuộc tính transition-property và transition-duration.
- Bạn có thể chỉ định nhiều giá trị cho transition-delay trong cùng một quy tắc CSS, mỗi giá trị sẽ tương ứng với từng thuộc tính được liệt kê trong transition-property.
Shorthand transition CSS
Shorthand transition CSS là cách viết tắt ngắn gọn khi kết hợp nhiều thuộc tính transition CSS trong cùng một dòng code thay vì phải viết từng dòng riêng biệt.
Cú pháp:
transition: property duration timing-function delay;Thay vì bạn viết từng dòng lệnh như sau:
transition-property: all;
transition-duration: 4s;
transition-timing-function: ease-in-out;
transition-delay: 2s;Bạn có thể viết ngắn gọn như này để mã của bạn trông gọn gàng:
transition: all 4s ease-in-out 2s; Đoạn code này sẽ áp dụng hiệu ứng chuyển đuyển đổi sẽ áp dụng với tất cả các thuộc tính được liệt kê, trong khoảng thời gian 7s, kiểu step-start và thời gian đợi là 0.7s.
Lưu ý
Cú pháp rút gọn của transition chỉ hoạt động khi tất cả các thuộc tính được liệt kê đều hỗ trợ chuyển đổi. Thứ tự của các thuộc tính trong cú pháp rút gọn không ảnh hưởng đến hoạt động của nó.
Các sự kiện đánh dấu quá trình chuyển tiếp
Các lập trình viên có thể nhận diện một hiệu ứng đã bắt đầu hay kết thúc chưa bằng cách sử dụng sự kiện transitioned. TransitionEvent bao gồm 2 thuộc tính:
propertyName: Là chuỗi báo hiệu tên các thuộc tính CSS cần diễn ra để kết thúc quá trình chuyển đổi.elapsedTime: Là số thực, giúp bạn nắm được số giây đã diễn ra trong quá trình chuyển đổi hiệu ứng. Giá trị của thuộc tính này không ảnh hưởng đến giá trị của thuộc tính transition-delay.
Để theo dõi quá trình chuyển đổi hiệu ứng, bạn có thể sử dụng phương thức addEventListener(). Cú pháp:
el.addEventListener("transitionstart", signalStart, true);Lưu ý
Sự kiện transitionend sẽ không xảy ra nếu:
- Không có thuộc tính transition-property được khai báo.
- Thời gian chuyển tiếp (duration) bằng 0.
- Hiệu ứng chuyển tiếp bị hủy bởi một hiệu ứng khác (ví dụ: thay đổi thuộc tính của phần tử trước khi hiệu ứng kết thúc).
Phát huy sức mạnh của Transition CSS
CSS Transition là một tính năng được nhiều nhà phát triển web yêu thích bởi sự tiện lợi và dễ sử dụng của nó. Hơn nữa, với transition CSS, mọi thứ trên trang web đều có thể trở nên mượt mà hơn mà không cần phải sử dụng đến JavaScript.
Ví dụ, để tạo ra hiệu ứng quả bóng di chuyển đến vị trí click chuột, trong JavaScript bạn sẽ cần đoạn code sau:
<p>Click anywhere to move the ball</p>
<div id="foo"></div>
<script>
var f = document.getElementById('foo');
document.addEventListener('click', function(ev){
f.style.transform = 'translateY('+(ev.clientY-25)+'px)';
f.style.transform += 'translateX('+(ev.clientX-25)+'px)';
},false);
</script>Tuy nhiên, đối với CSS, bạn chỉ cần thiết lập các thuộc tính transition như sau:
p {
padding-left: 60px;
cursor: pointer; /* Bổ sung để tạo hiệu ứng con trỏ */
}
#foo {
border-radius: 50px;
width: 50px;
height: 50px;
background: #c00;
position: absolute;
top: 0;
left: 0;
transition: transform 1s; /* Áp dụng hiệu ứng chuyển động mượt mà */
}Transition CSS và Animation CSS: “Anh em song sinh” nhưng khác biệt
| Tiêu chí | Transition CSS | Animation CSS |
|---|---|---|
| Khả năng thực hiện tác vụ | – Có thể hiển thị trực quan các thay đổi thuộc tính. – Có thể kiểm soát tốc độ thay đổi của một hoặc nhiều giá trị thuộc tính bằng hàm. – Có thể chỉ định thuộc tính CSS muốn thay đổi. | |
| Bản chất | Chỉ có khả năng chuyển đổi từ thời điểm ban đầu sang thời điểm cuối cùng, không bao gồm bước trung gian. | Tạo ra các chuyển đổi phức tạp hơn bằng cách điều khiển nhiều thuộc tính tại nhiều thời điểm khác nhau. |
| Độ phức tạp | Đơn giản hơn, phù hợp cho việc thiết lập các chuyển đổi cơ bản. | Phức tạp hơn, phù hợp cho các hiệu ứng chuyển đổi hoạt hình tùy biến. |
| Tần suất | Chỉ có thể kích hoạt một lần. | Có thể chạy lặp lại vô hạn nhờ thuộc tính animation-interation-count. |
| Kích hoạt | Cần có yêu cầu để kích hoạt chuyển đổi, ví dụ như cần di chuyển chuột vào phần tử. | Có thể tự động khởi chạy bằng cách thêm các lớp động vào phần tử. |
| Sự thay đổi | Chạy tiến tới khi được kích hoạt, và chạy lùi khi hủy bỏ kích hoạt. | Có thể chạy tiến lùi hoặc đổi chiều ngược lại. |
| Tương tác với Javascript | Dễ sử dụng đối với JavaScript. | Khó sử dụng với JavaScript. |
| Phạm vi ứng dụng | Phù hợp để cải thiện về mặt giao diện người dùng, phản hồi các hành động cụ thể như di chuột hay nhấp chuột của người dùng. | Phù hợp cho các trường hợp cần chuyển động hoặc các hiệu ứng hình ảnh phức tạp, do tương tác của người dùng hoặc khởi chạy tự động. |
Vietnix – Giải pháp lưu trữ giúp website luôn mượt mà như hiệu ứng CSS
Để những hiệu ứng chuyển động từ Transition CSS phát huy tối đa trên website, bạn cần một nền tảng lưu trữ ổn định, tốc độ cao. Vietnix cung cấp dịch vụ hosting và VPS được tối ưu hiệu suất, đảm bảo website luôn tải nhanh, hoạt động mượt và an toàn. Hệ thống máy chủ hiện đại kết hợp với đội ngũ kỹ thuật giàu kinh nghiệm sẵn sàng hỗ trợ 24/7 giúp bạn yên tâm phát triển website mà không lo gián đoạn.
Thông tin liên hệ:
- Website: https://vietnix.vn/
- Hotline: 1800 1093
- Email: sales@vietnix.com.vn
- Địa chỉ: 265 Hồng Lạc, Phường Bảy Hiền, Thành Phố Hồ Chí Minh
Câu hỏi thường gặp
Khi nào thì transition CSS không hoạt động?
Transition CSS sẽ không hoạt động trong một số trường hợp dưới đây:
– Thuộc tính transition chưa được khai báo.
– Thuộc tính transition-property có giá trị là none.
– Thuộc tính transition-duration có giá trị bằng 0 hoặc giá trị âm.
– Các thuộc tính transition chưa được thiết lập đúng.
– Các phần tử không thay đổi trạng thái.
Cách thay đổi màu nền của thẻ DIV bằng transition
Để tạo hiệu ứng chuyển đổi mượt mà cho màu nền của thẻ div khi có sự kiện xảy ra (ví dụ: di chuột), bạn cần sử dụng thuộc tính transition trong CSS.#div {
background-color: blue; /* Màu nền mặc định */
transition: background-color 2s ease; /* Chuyển đổi màu nền trong 2 giây, hiệu ứng ease */
}
#div:hover {
background-color: red; /* Màu nền khi di chuột vào */
}
Transition có thể áp dụng cho những thuộc tính nào?
Transition hoạt động tốt với các thuộc tính như:
Thuộc tính màu sắc: color, background-color, border-color
Kích thước và khoảng cách: width, height, margin, padding
Vị trí và hiển thị: top, left, right, bottom, opacity, visibility (gián tiếp)
Viền và bo góc: border-width, border-color, border-radius
Bóng và đổ bóng: box-shadow, text-shadow
Biến đổi (transform): transform: scale(), rotate(), translate(), v.v.
Phông chữ và chữ: letter-spacing, word-spacing, line-height, font-size
Khác: background-position, background-size, filter
Các thuộc tính như display, position, z-index không thể áp dụng transition.
Sự khác biệt giữa transition và animation trong CSS là gì?
Transition phụ thuộc vào trigger (thường là hover, focus), còn animation có thể chạy tự động theo keyframes.
Transition có áp dụng được với transform không?
Có. Bạn có thể dùng transition: transform 0.3s ease để chuyển đổi vị trí, xoay hoặc scale phần tử.
transition-timing-function hoạt động như thế nào?
Nó điều khiển tốc độ của hiệu ứng theo thời gian – ví dụ: ease-in, ease-out, linear…
transition-property: all có ảnh hưởng gì đến hiệu suất không?
Có thể gây tốn tài nguyên nếu áp dụng lên quá nhiều thuộc tính hoặc phần tử không cần thiết.
Tailwind CSS hỗ trợ transition không?
Có. Tailwind cung cấp các class như transition, duration-300, ease-in-out để áp dụng hiệu ứng dễ dàng.
Làm sao để viết shorthand transition ngắn gọn mà vẫn rõ ràng?
Dùng cú pháp: transition: property duration timing-function delay; ví dụ: transition: all 0.3s ease-in-out 0s;
Transition CSS có áp dụng được với visibility không?
Không trực tiếp. Bạn cần kết hợp opacity + visibility và điều khiển bằng JavaScript hoặc lớp CSS để hiệu ứng mượt.
Có thể dùng transition để tạo hiệu ứng hiển thị menu dropdown không?
Có, kết hợp max-height, opacity, hoặc transform để tạo cảm giác trượt/mở mượt.
Lời kết
Transition CSS giúp nâng cao trải nghiệm người dùng bằng những hiệu ứng mượt mà mà không cần đến JavaScript phức tạp. Nếu bạn muốn cải thiện giao diện mà vẫn giữ mã nguồn gọn nhẹ, đây là kỹ thuật không thể thiếu. Nếu bạn có bất kỳ thắc mắc nào về cách sử dụng transition, tối ưu hiệu suất, hoặc các ứng dụng thực tế khác, hãy để lại bình luận bên dưới!
