Cách tạo ảnh động CSS hiệu suất cao

Kayce Basques

Rachel Andrew

Hướng dẫn này hướng dẫn bạn cách tạo ảnh động CSS hiệu suất cao.

Hãy xem bài viết Tại sao một số ảnh động bị chậm? để tìm hiểu lý thuyết đằng sau các đề xuất này.

Khả năng tương thích với trình duyệt

Tất cả các thuộc tính CSS mà hướng dẫn này đề xuất đều có khả năng hỗ trợ tốt trên nhiều trình duyệt.

transform

opacity

will-change

Di chuyển một phần tử

Để di chuyển một phần tử, hãy sử dụng giá trị từ khoá translate hoặc rotation của thuộc tính transform.

Ví dụ: để trượt một mục vào khung hiển thị, hãy sử dụng translate.

.animate {
  animation: slide-in 0.7s both;
}

@keyframes slide-in {
  0% {
    transform: translateY(-1000px);
  }
  100% {
    transform: translateY(0);
  }
}

Sử dụng rotate để xoay các phần tử. Ví dụ sau đây xoay một phần tử 360 độ.

.animate {
  animation: rotate 0.7s ease-in-out both;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

Đổi kích thước phần tử

Để đổi kích thước một phần tử, hãy sử dụng giá trị từ khoá scale của thuộc tính transform.

.animate {
  animation: scale 1.5s both;
}

@keyframes scale {
  50% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(1);
  }
}

Thay đổi chế độ hiển thị của một phần tử

Để hiển thị hoặc ẩn một phần tử, hãy sử dụng opacity.

.animate {
  animation: opacity 2.5s both;
}

@keyframes opacity {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

Tránh các thuộc tính kích hoạt bố cục hoặc vẽ

Trước khi sử dụng bất kỳ thuộc tính CSS nào cho ảnh động (ngoài transform và opacity), hãy xác định tác động của thuộc tính đó đối với quy trình kết xuất. Tránh mọi thuộc tính kích hoạt bố cục hoặc vẽ trừ phi thực sự cần thiết.

Buộc tạo lớp

Như đã giải thích trong phần Tại sao một số ảnh động bị chậm?, việc đặt các phần tử trên một lớp mới cho phép trình duyệt vẽ lại các phần tử đó mà không cần vẽ lại phần bố cục còn lại.

Trình duyệt thường có thể đưa ra quyết định chính xác về những mục cần đặt trên lớp mới, nhưng bạn có thể buộc tạo lớp theo cách thủ công bằng thuộc tính will-change. Như tên gọi, thuộc tính này cho trình duyệt biết rằng phần tử này sẽ được thay đổi theo một cách nào đó.

Trong CSS, bạn có thể áp dụng will-change cho bất kỳ bộ chọn nào:

body > .sidebar {
  will-change: transform;
}

Tuy nhiên, quy cách đề xuất rằng bạn chỉ nên thêm thuộc tính này vào các phần tử luôn sắp thay đổi. Ví dụ: bạn có thể sử dụng tính năng này cho một thanh bên mà người dùng có thể trượt vào và ra. Nếu phần tử không thay đổi thường xuyên, hãy áp dụng will-change bằng cách sử dụng JavaScript khi có khả năng thay đổi. Hãy nhớ cho trình duyệt đủ thời gian để thực hiện các biện pháp tối ưu hoá cần thiết và xoá thuộc tính khi quá trình thay đổi đã dừng.

Để buộc tạo lớp trong trình duyệt không hỗ trợ will-change, bạn có thể đặt transform: translateZ(0).

Gỡ lỗi ảnh động bị giật hoặc chậm

Chrome DevTools và Firefox DevTools có thể giúp bạn tìm hiểu lý do ảnh động bị chậm hoặc bị lỗi.

Kiểm tra xem ảnh động có kích hoạt bố cục hay không

Ảnh động di chuyển một phần tử bằng cách sử dụng một thành phần khác ngoài transform có thể sẽ bị chậm. Ví dụ sau đây so sánh ảnh động sử dụng transform với ảnh động sử dụng top và left.

.box {
  position: absolute;
  top: 10px;
  left: 10px;
  animation: move 3s ease infinite;
}

@keyframes move {
  50% {
     top: calc(90vh - 160px);
     left: calc(90vw - 200px);
  }
}

.box {
  position: absolute;
  top: 10px;
  left: 10px;
  animation: move 3s ease infinite;
}

@keyframes move {
  50% {
     transform: translate(calc(90vw - 200px), calc(90vh - 160px));
  }
}

Bạn có thể kiểm thử điều này trong hai ví dụ sau và khám phá hiệu suất bằng DevTools.

• Trước đây, với ảnh động top và left.
• Sau, với transform.

Công cụ của Chrome cho nhà phát triển

1. Mở bảng điều khiển Hiệu suất.
2. Ghi lại hiệu suất trong thời gian chạy trong khi ảnh động đang diễn ra.
3. Kiểm tra thẻ Tóm tắt.

Nếu bạn thấy giá trị khác 0 cho Rendering (Hiển thị) trong thẻ Summary (Tóm tắt), thì điều này có thể có nghĩa là ảnh động của bạn đang khiến trình duyệt thực hiện công việc bố cục.