Một trang web muốn thu hút được nhiều lượt truy cập không chỉ cần nội dung đa dạng và chỉn chu, mà còn cần một giao diện đẹp và dễ tương tác. Hãy cùng Vietnix tìm hiểu về transition CSS – một tính năng quan trọng giúp giao diện website của bạn trở nên ấn tượng và hút mắt hơn.
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;
border: 5px solid #fdd98b;
width: 100px;
height: 20px;
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.
Mọi người cũng xem:
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.
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.
Ví dụ: Tôi 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>;Trong đó:
<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.
Ví dụ: tôi đặ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.
Ví dụ: tôi đặ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:
Cú pháp:
transition-delay: <time>;Trong đó:
- 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ụ: tôi đặ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.
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.
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);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.
<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. |
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 trong CSS có thể áp dụng cho nhiều thuộc tính khác nhau, bao gồm các nhóm thuộc tính chính như: kích thước (ví dụ: width, height, padding, margin), vị trí (ví dụ: top, right, bottom, left), hiển thị (opacity, visibility), màu sắc (ví dụ: color, background-color), phông chữ (ví dụ: font-size, font-weight, line-height), bóng đổ (box-shadow), đường viền (border-width, border-color) và biến đổi (transform).
Lời kết
Trong bài viết này, Vietnix đã chia sẻ đến cho bạn những kiến thức mới về tính năng transition CSS, cũng như cách áp dụng tính năng này. Hi vọng bạn có thể áp dụng các thuộc tính transition CSS để tạo điểm nhấn ấn tượng cho trang web của bạn và thu hút nhiều lượt tương tác hơn từ người dùng.
