Một website muốn thu hút được nhiều lượt khách truy cập không chỉ cần thông tin đầy đủ và đa dạng, mà còn đòi hỏi cách trình bày chỉn chu và dễ tương tác. Trong bài viết này, hãy cùng ITviec tìm hiểu về transition CSS – một khía cạnh quan trọng của hoạt ảnh trong CSS giúp giao diện trang web của bạn trông hút mắt hơn nhé.

Đọc bài viết này để hiểu rõ hơn:

  • Transition CSS là gì? Tại sao nên dùng transition CSS?
  • 4 thuộc tính của transition CSS
  • Transition CSS và animation CSS có gì khác nhau?
  • Các câu hỏi thường gặp về transition CSS

Transition CSS là gì? 

Transitions CSS là một tính năng cho phép nhà phát triển web tạo ra hiệu ứng chuyển đổi và kiểm soát tốc độ chuyển đổi của các phần tử HTML khi thuộc tính CSS của chúng thay đổi. 

Chẳng hạn, bạn muốn thay đổi màu của một phần tử từ trắng sang đen. Thông thường, sự thay đổi sẽ diễn ra tức thời. Tuy nhiên khi áp dụng transition CSS, các thay đổi này sẽ diễn ra theo các khoảng thời gian đã được định sẵn.

Cú pháp transition CSS:

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

Transition CSS gồm 4 thuộc tính: 

  • transition-property (thuộc tính chuyển đổi)
  • transition-duration (thời gian chuyển đổi) 
  • transition-timing-function (hàm thời gian chuyển đổi)
  • transition-delay (trì hoãn chuyển đổi)

Xem xét ví dụ thiết lập các thuộc tính transition CSS dưới đây: 

<!DOCTYPE html>

<html>

  <head>

    <style>

      div {

        padding: 5px;

        text-align: center;

        border: 5px solid #f94144;

        width: 100px;

        height: 20px;

        background-color: #f9c74f;

        transition-property: all;

        transition-duration: 0.4s;

      }

      div:hover {

        width: 200px;

        height: 200px;

        background-color: #90be6d;

        border: 10px double #023047;

      }

    </style>

  </head>

  <body>

    <div>Hover Here!</div>

  </body>

</html>

Kết quả: Khi bạn di chuyển chuột đến phần tử div, kích thước, màu nền và cả đường viền của phần tử đều được thay đổi theo các giá trị đã đưa ra.

Trạng thái bình thường Trạng thái khi kích hoạt transition

Tại sao nên ứng dụng transition CSS vào trang web? 

Hiệu ứng transition mang lại nhiều lợi ích cho trang web, một số ưu điểm phổ biến là:

  • Điều hướng mượt mà: Transition CSS tạo ra luồng lưu chuyển 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ỳ thay đổi đột ngột nào.
  • Thu hút sự tương tác: Transition CSS hướng sự chú ý của người dùng vào các yếu tố quan trọng, thu hút người dùng khám phá trang web và tương tác nhiều hơn.
  • Giúp trang web hút mắt hơn: Transition CSS không chỉ giúp trang web trông “bóng bẩy” mà còn đảm bảo trải nghiệm nhất quán và hấp dẫn cho người dùng trên các trình duyệt khác nhau, góp phần xây dựng thương hiệu website của bạn.

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

Thuộc tính

 Mô tả
transition-property

Xác định tên của các thuộc tính CSS mà hiệu ứng transition sẽ được áp dụng. 

transition-duration

 Xác định thời gian thực hiện quá trình chuyển đổi, được tính bằng giây. Giá trị càng lớn, thời gian chuyển đổi càng lâu và ngược lại.
transition-timing-function

Sử dụng các hàm thời gian khác nhau để tạo hiệu ứng chuyển đổi như mong muốn (linear, ease, ease-in, ease-out, cubic-bezier,…).

transition-delay

Thiết lập khoảng thời gian chờ đợi trước khi hiệu ứng transition thực sự diễn ra.

Cùng tìm hiểu chi tiết về 4 thuộc tính này:

transition-property

Cú pháp:

transition-property: none | all | initial | inherit | property-name;

Trong đó:

  • None: Không áp dụng hiệu ứng transition cho bất kỳ thuộc tính nào.
  • All: Áp dụng hiệu ứng transition cho tất cả thuộc tính CSS có thể chuyển đổi.
  • Initial: Đặt thuộc tính quay lại giá trị mặc định của nó.
  • Inherit: Giá trị của thuộc tính này sẽ được thừa hưởng từ phần tử cha.
  • <property-name>: Danh sách thuộc tính CSS được phân cách bởi dấu phẩy.

Lưu ý: Chỉ các <property-name> được liệt kê mới áp dụng hiệu ứng transition; các thay đổi đối với tất cả thuộc tính khác sẽ diễn ra ngay lập tức như bình thường.

Ví dụ: Đặt transition-property để áp dụng hiệu ứng transition cho chiều rộng (width) và chiều cao (height).

<!DOCTYPE html>

<html>

<head>

<style> 

div {

  width: 100px;

  height: 100px;

  background: red;

  transition-property: width, height;

  transition-duration: 2s;

}

div:hover {

  width: 300px;

  height: 300px;

}

</style>

</head>

<body>

<h1>Thuộc tính transition-property</h1>

<div></div>

<p>Di chuyển chuột vào phần tử div để thấy sự thay đổi nhé.</p>

</body>

</html>

Kết quả: Khi bạn di chuyển chuột vào phần tử div (ô vuông màu đỏ), hiệu ứng transition-property sẽ được kích hoạt, phần tử thay đổi cả chiều rộng và chiều cao.

Trạng thái bình thường Trạng thái khi kích hoạt transition

transition-duration

Cú pháp:

transition-duration: time;

Giá trị time biểu thị khoảng thời gian cần thiết để thực hiện hiệu ứng chuyển đổi từ giá trị cũ sang giá trị mới. Khoảng thời gian này có thể bằng 0 (không có hiệu ứng transition nào diễn ra) hoặc phải là một số nguyên dương. 

Bạn có thể chỉ định một thời gian duy nhất áp dụng cho tất cả thuộc tính trong quá trình transition hoặc nhiều giá trị khác nhau để cho phép mỗi thuộc tính transition trong một khoảng thời gian khác nhau.

Ví dụ: Đặt thuộc tính transition-duration có giá trị time là 5s.

<!DOCTYPE html>

<html>

<head>

<style> 

div {

  width: 100px;

  height: 100px;

  background: red;

  transition-property: width;

  transition-duration: 5s;

}

div:hover {

  width: 300px;

}

</style>

</head>

<body>

<h1>Thuộc tính transition-duration</h1>

<p>Di chuyển chuột lên phần tử div để xem hiệu ứng transition (hiệu ứng sẽ kéo dài trong 5 giây).</p>

<div></div>

</body>

</html>

Kết quả: Khi bạn di chuyển chuột đến phần tử div (ô vuông màu đỏ), hiệu ứng transition sẽ bắt đầu chạy và kéo dài trong vòng 5s.

Trạng thái bình thường

 Trạng thái khi kích hoạt transition

transition-timing-function

Cú pháp:

transition-timing-function: ease | ease-in | ease-out | ease-in-out | linear |  step-start | step-end;

Trong đó:

  • ease (giá trị mặc định): Tương đương với cubic-bezier(0.25, 0.1, 0.25, 1.0). Hiệu ứng chuyển đổi bắt đầu chậm, tăng tốc dần về giữa, sau đó chậm lại khi kết thúc.
  • ease-in: Tương đương với cubic-bezier(0.42, 0, 1.0, 1.0). Bắt đầu chậm, tốc độ chuyển đổi tăng dần cho đến khi hoàn thành.
  • ease-out: Tương đương với cubic-bezier(0, 0, 0.58, 1.0). Bắt đầu chuyển đổi nhanh, chậm dần khi quá trình chuyển đổi tiếp tục.
  • ease-in-out: Tương đương với cubic-bezier(0.42, 0, 0.58, 1.0). Bắt đầu chậm, tăng tốc, rồi lại chậm dần.
  • linear: Tương đương với cubic-bezier(0.0, 0.0, 1.0, 1.0). Chuyển đổi diễn ra với tốc độ không đổi từ đầu đến cuối.
  • step-start: Là cài đặt hàm nhảy bắt đầu.
  • step-end: Cài đặt hàm nhảy kết thúc.
  • steps(int, start | end): Xác định một hàm bậc thang, với hai tham số. Trong đó, tham số thứ nhất xác định số lượng khoảng thời gian trong hàm, phải là một số nguyên dương (lớn hơn 0). Tham số thứ hai (tùy chọn) là giá trị “start” (bắt đầu) hoặc “end” (kết thúc), xác định thời điểm xảy ra sự thay đổi giá trị trong khoảng thời gian. Nếu không cung cấp tham số thứ hai, mặc định sẽ là “end” (kết thúc). Ví dụ: steps(1, start), steps(1, end).
  • Initial: Thiết lập thuộc tính về giá trị mặc định của nó.
  • Inherit: Kế thừa thuộc tính từ thành phần cha.

Lưu ý: cubic-bezier(n, n, n, n) cho phép bạn định nghĩa các giá trị riêng trong hàm cubic-bezier. Giá trị có thể là các số từ 0 đến 1.

Ví dụ: Đặt thuộc tính transition-timing-function có giá trị là linear.

<!DOCTYPE html>

<html>

<head>

<style> 

div {

  width: 100px;

  height: 100px;

  background: red;

  transition: width 2s;

  transition-timing-function: linear;

}

div:hover {

  width: 300px;

}

</style>

</head>

<body>

<h1>Thuộc tính transition-timing-function</h1>

<p>Di chuyển chuột đến phần tử div để xem hiệu ứng.</p>

<div></div>

</body>

</html>

Kết quả: Khi bạn di chuyển chuột đến phần tử div, hiệu ứng transition sẽ được kích hoạt ngay lập tức, ô vuông màu đỏ sẽ thay đổi theo chiều ngang với tốc độ không đổi từ đầu đến cuối.

Trạng thái bình thường

 Trạng thái khi kích hoạt transition

transition-delay

Cú pháp:

transition-delay: time | initial | inherit;

Trong đó:

  • Time: Đại diện cho một khoảng thời gian cụ thể, được biểu thị bằng đơn vị thời gian hợp lệ như s (giây), ms (mili giây),…
  • Initial: Sử dụng giá trị mặc định của thuộc tính transition-delay cho phần tử. Giá trị mặc định này thường là 0s, nghĩa là hiệu ứng chuyển đổi sẽ bắt đầu ngay lập tức.
  • Inherit: Kế thừa giá trị transition-delay từ phần tử cha.

Ví lo dụ: Đặt thuộc tính transition-delay có giá trị time là 2s.

<!DOCTYPE html>

<html>

<head>

<style> 

div {

  width: 100px;

  height: 100px;

  background: red;

  transition-property: width;

  transition-duration: 5s;

  transition-delay: 2s;

}

div:hover {

  width: 300px;

}

</style>

</head>

<body>

<h1>Thuộc tính transition-delay</h1>

<p>Di chuyển chuột đến phần tử div để xem hiệu ứng (Lưu ý hiệu ứng sẽ bắt đầu sau 2s).</p>

<div></div>

</body>

</html>

Kết quả: Khi bạn di chuyển chuột vào phần tử div, hiệu ứng transition không thực hiện ngay lập tức mà khoảng 2 giây sau mới bắt đầu.

Trạng thái bình thường

 Trạng thái khi kích hoạt transition

Lưu ý:

  • Thuộc tính transition-delay chỉ có hiệu lực khi sử dụng cùng với các thuộc tính transition-property và transition-duration.
  • Bạn có thể sử dụng nhiều giá trị transition-delay trong cùng một quy tắc CSS, tương ứng với từng thuộc tính trong transition-property.

Shorthand transition CSS

Shorthand transition CSS là cách viết tắt để định nghĩa nhiều thuộc tính transition CSS trong một dòng code. Thay vì phải viết từng thuộc tính transition riêng biệt, bạn có thể sử dụng shorthand để gộp chúng lại với nhau.

Cú pháp:

transition: property duration timing-function delay;

Ví dụ, thay vì bạn viết từng dòng lệnh như:

transition-property: all;

transition-duration: 3s;

transition-timing-function: ease-in-out;

transition-delay: 0.5s;

Bạn có thể viết ngắn gọn thành: 

transition: all 3s ease-in-out 0.5s; 

Đoạn code này sẽ áp dụng hiệu ứng chuyển đổi cho tất cả thuộc tính với thời gian 3s, kiểu ease-in-out và trì hoãn 0.5s.

Lưu ý: Shorthand transition chỉ hoạt động khi tất cả các thuộc tính được liệt kê đều hỗ trợ transition. Thứ tự các thuộc tính trong shorthand không quan trọng.

Transition CSS và animation CSS có gì khác nhau?

Transition CSS và animation CSS thường bị nhầm lẫn với nhau bởi khả năng thực hiện những tác vụ tương tự nhau, chẳng hạn hiển thị trực quan các thay đổi thuộc tính, thiết lập hàm để kiểm soát tốc độ thay đổi giá trị thuộc tính, chỉ định các thuộc tính CSS có thể thay đổi, khả năng thu thập dữ liệu tương tác người dùng với các hiệu ứng transition hoặc animation.

Mặc dù có điểm tương đồng, nhưng transition CSS hoặc animation CSS cũng có những điểm khác biệt nhất định. Dưới đây là những điểm khác biệt chính của hai hiệu ứng này.

Tiêu chí Transition CSS Animation CSS
Bản chất Chỉ có thể chuyển từ trạng thái ban đầu sang trạng thái cuối cùng, không có bước trung gian.

Tạo các hoạt động phức tạp hơn bằng cách điều khiển nhiều trạng thái thuộc tính tại các thời điểm khác nhau.

Độ phức tạp

 Đơn giản hơn, với việc triển khai trực tiếp cho các thay đổi trạng thái cơ bản. Phức tạp hơn, phù hợp với các hiệu ứng hoạt hình chi tiết và tuỳ biến hơn.
Tần suất Chỉ có thể chạy một lần.

Có thể lặp vô hạn nhờ thuộc tính animation-interation-count.

Kích hoạt

 Yêu cầu kích hoạt để hoạt động, chẳng hạn thao tác di chuyển chuột vào phần tử div. Khởi chạy tự động khi trang hoặc phần tử được tải hoặc bằng cách thêm các lớp động vào phần tử.
Sự thay đổi  Chạy tiến khi được kích hoạt và chạy ngược lại khi bỏ kích hoạt.

Có thể chạy tiến, lùi hoặc đổi chiều.

Tương tác với JavaScript

 Dễ sử dụng với JavaScript hơn. Khó sử dụng với JavaScript hơn.
Phạm vi ứng dụng Thích hợp để cải thiện các yếu tố giao diện người dùng, phản hồi các hành động cụ thể của người dùng như di chuột hoặc nhấp chuột.

Được áp dụng trong các tình huống yêu cầu chuyển động liên tục hoặc hiệu ứng hình ảnh phức tạp hơn, do tương tác của người dùng kích hoạt hoặc chạy tự động.

Đọc thêm: Tổng hợp 11 hiệu ứng Animation CSS phổ biến

Các câu hỏi thường gặp về transition css

Khi nào transition CSS không hoạt động?

Khi hiệu ứng chuyển đổi CSS (transition) không hoạt động như mong đợi, bạn có thể kiểm tra một số điểm sau đây:

  • transition-property được đặt thành none: Thuộc tính transition-property xác định tên của thuộc tính CSS được áp dụng hiệu ứng transition. Nếu thuộc tính này được đặt thành none, sẽ không có thuộc tính nào được chuyển đổi. Do đó, hãy kiểm tra xem bạn đã thiết lập transition-property cho thuộc tính CSS muốn tạo hiệu ứng transition chưa nhé.
  • transition-duration được đặt thành 0 hoặc giá trị âm: Thuộc tính transition-duration xác định thời gian diễn ra hiệu ứng transition. Nếu thuộc tính này không được thiết lập, thời gian mặc định sẽ là 0 giây, nghĩa là sự thay đổi giữa các trạng thái sẽ diễn ra ngay lập tức mà không có hiệu ứng. Còn giá trị âm sẽ khiến hiệu ứng chuyển đổi không hoạt động.
  • Thuộc tính CSS không thay đổi giá trị: Transition chỉ hoạt động khi có sự thay đổi giá trị của thuộc tính được chỉ định. Nếu giá trị không thay đổi, sẽ không có hiệu ứng.
  • Chưa thiết lập đúng các thuộc tính transition: Transition cần có ít nhất hai giá trị: thuộc tính được chuyển đổi và thời gian. Nếu thiếu một trong hai, transition sẽ không hoạt động.
  • Phần tử không thay đổi trạng thái: Transition hoạt động khi có sự thay đổi trạng thái của phần tử (ví dụ: hover, focus, click). Nếu trạng thái không thay đổi, transition sẽ không kích hoạt.

Cách sử dụng transition CSS để đổi màu nền thẻ DIV

Để thay đổi màu sắc của phần tử div trong CSS, bạn cần chỉ định hai thuộc tính là transition và background-color. 

/* Đặt màu nền ban đầu */

div {

  background-color: blue;

}

/* Thêm transition */

div {

  transition: background-color 1s;

}

/* Thay đổi màu nền khi di chuyển chuột qua phần tử */

div:hover {

  background-color: red;

}

Ví dụ: 

<!DOCTYPE html>

<html>

<head>

<style> 

div {

  width: 100px;

  height: 100px;

  background: blue;

  transition: background-color 1s;

}

div:hover {

  background: red;

}

</style>

</head>

<body>

<h1>Thay đổi màu sắc với transition CSS</h1>

<p>Di chuyển chuột đến phần tử div để xem hiệu ứng.</p>

<div></div>

</body>

</html>

Kết quả: Màu nền của phần tử div khi di chuyển chuột đến sẽ chuyển đổi từ xanh sang đỏ trong 1 giây.

Trạng thái bình thường

 Trạng thái khi kích hoạt transition

Transition CSS có thể áp dụng cho các thuộc tính nào?

Transition CSS có thể được áp dụng cho các thuộc tính CSS có giá trị riêng biệt, thể hiện được sự thay đổi giữa trạng thái bắt đầu và kết thúc của một phần tử, ví dụ như các thuộc tính kích thước, vị trí, màu sắc, bóng đổ, hiệu ứng văn bản, border, background,…

  • Kích thước: width, height, padding, margin, font-size, line-height,…
  • Vị trí: top, right, bottom, left, position, transform,…
  • Màu sắc: color, background-color, opacity,…
  • Bóng đổ: box-shadow, text-shadow,…
  • Hiệu ứng văn bản: text-decoration, text-transform,…
  • Border: border-width, border-style, border-color,…
  • Background: background-image, background-position, background-size, background-repeat,…

Tuy nhiên, cũng có một số thuộc tính CSS không hỗ trợ transition như thuộc tính shorthand, thuộc tính nội dung, thuộc tính định dạng văn bản, thuộc tính url và một số thuộc tính khác.

  • Thuộc tính shorthand: Một số thuộc tính CSS là dạng viết tắt cho nhiều thuộc tính khác. Ví dụ margin là shorthand cho margin-top, margin-right, margin-bottom, margin-left,…
  • Thuộc tính nội dung: content, cursor,…
  • Thuộc tính định dạng văn bản: font-family, font-weight, font-style, letter-spacing,…
  • Thuộc tính URL: src, href,…
  • Thuộc tính khác: z-index, pointer-events, user-select,…

Hiệu ứng transition CSS hoạt động bằng cách theo dõi sự thay đổi của các thuộc tính CSS và tạo ra hiệu ứng chuyển đổi mượt mà giữa các giá trị cũ và mới. Khi bạn thay đổi giá trị của một thuộc tính CSS bằng JavaScript, transition CSS vẫn sẽ được áp dụng miễn là thuộc tính đó hỗ trợ transition.

Tuy nhiên, kết quả có thể không như mong đợi nếu giá trị thay đổi quá nhanh hoặc không nhất quán.

Tổng kết

Có thể thấy, những thuộc tính transition CSS có phần đơn giản hơn so với animation CSS. Vậy nên ITviec tin rằng, với bài viết này, bạn sẽ không gặp quá nhiều khó khăn khi tiếp cận kiến thức mới về thuộc tính CSS. Đặc biệt hơn, nếu bạn đang xây dựng những trang web thương mại, hãy chủ động áp dụng transition CSS cho các phần tử để vừa tạo điểm nhấn cho web nhưng cũng thu hút lượt tương tác từ người dùng hơn nhé.

Tham khảo thêm loạt bài viết thuộc chủ đề CSS: