Bạn có thể có nhiều CSS chuyển đổi không?

Để áp dụng các phép biến đổi cho một phần tử, hãy sử dụng Thuộc tính CSS

.target:hover {
  transform: translateX(50%) rotate(30deg) scale(2); /* Only the value of scale() changed */
}

0. Tài sản chấp nhận một hoặc nhiều

.target:hover {
  transform: translateX(50%) rotate(30deg) scale(2); /* Only the value of scale() changed */
}

2 lần lượt được áp dụng

.target {
  transform: translateX(50%) rotate(30deg) scale(1.2);
}

Phần tử được nhắm mục tiêu được dịch 50% trên trục X, xoay 30 độ và cuối cùng được chia tỷ lệ lên tới 120%

Mặc dù thuộc tính

.target:hover {
  transform: translateX(50%) rotate(30deg) scale(2); /* Only the value of scale() changed */
}

0 hoạt động tốt, nhưng sẽ hơi tẻ nhạt khi bạn muốn thay đổi bất kỳ giá trị nào trong số đó một cách riêng lẻ

Để thay đổi tỷ lệ khi di chuột, bạn phải sao chép tất cả các hàm trong thuộc tính biến đổi, mặc dù giá trị của chúng không thay đổi

.target:hover {
  transform: translateX(50%) rotate(30deg) scale(2); /* Only the value of scale() changed */
}

Các thuộc tính biến đổi riêng lẻ

Vận chuyển với Chrome 104 là các thuộc tính riêng lẻ cho các biến đổi CSS. Các thuộc tính là scale, rotate và translate, mà bạn có thể sử dụng để xác định riêng các phần đó của phép biến đổi

Bằng cách đó, Chrome sẽ kết hợp với Firefox và Safari vốn đã hỗ trợ các thuộc tính này

Hỗ trợ trình duyệt chrome 104, Được hỗ trợ 104 firefox 72, Được hỗ trợ 72 edge 104, Supported 104 safari 14.1, Supported 14. 1

Không phải tất cả các hàm chuyển đổi đều có thuộc tính riêng phù hợp, ví dụ:

.target:hover {
  transform: translateX(50%) rotate(30deg) scale(2); /* Only the value of scale() changed */
}

7 và

.target:hover {
  transform: translateX(50%) rotate(30deg) scale(2); /* Only the value of scale() changed */
}

8

Viết lại ví dụ

.target:hover {
  transform: translateX(50%) rotate(30deg) scale(2); /* Only the value of scale() changed */
}

0 trước đó với các thuộc tính riêng lẻ, đoạn trích của bạn sẽ trở thành thế này

________số 8_______

Vấn đề đặt hàng

Một điểm khác biệt chính giữa thuộc tính CSS

.target:hover {
  transform: translateX(50%) rotate(30deg) scale(2); /* Only the value of scale() changed */
}

0 ban đầu và các thuộc tính mới là thứ tự áp dụng các phép biến đổi đã khai báo

Với

.target:hover {
  transform: translateX(50%) rotate(30deg) scale(2); /* Only the value of scale() changed */
}

0, các hàm chuyển đổi được áp dụng theo thứ tự chúng được viết – từ trái (bên ngoài) sang phải (bên trong)

Với các thuộc tính biến đổi riêng lẻ, thứ tự không phải là thứ tự mà chúng được khai báo. Thứ tự luôn giống nhau. đầu tiên là translate (bên ngoài), sau đó là rotate, và sau đó là scale (bên trong)

Điều đó có nghĩa là cả hai đoạn mã sau đều cho cùng một kết quả

.transform--individual {
  translate: 50% 0;
  rotate: 30deg;
  scale: 1.2;
}

.transform--individual-alt {
  rotate: 30deg;
  translate: 50% 0;
  scale: 1.2;
}

Trong cả hai trường hợp, các phần tử được nhắm mục tiêu trước tiên sẽ được dịch bởi

.target {
  translate: 50% 0;
  rotate: 30deg;
  scale: 1.2;
}

5 trên trục X, sau đó được xoay bởi

.target {
  translate: 50% 0;
  rotate: 30deg;
  scale: 1.2;
}

6 và cuối cùng được thu nhỏ bởi

.target {
  translate: 50% 0;
  rotate: 30deg;
  scale: 1.2;
}

7

Nếu một trong các thuộc tính biến đổi riêng lẻ được khai báo cùng với thuộc tính

.target:hover {
  transform: translateX(50%) rotate(30deg) scale(2); /* Only the value of scale() changed */
}

0, thì các biến đổi riêng lẻ đó sẽ được áp dụng trước (translate, rotate, và sau đó là scale) với

.target:hover {
  transform: translateX(50%) rotate(30deg) scale(2); /* Only the value of scale() changed */
}

0 cuối cùng (bên trong). Thông tin chi tiết khác có trong thông số kỹ thuật xác định

Ảnh động

Lý do chính khiến các thuộc tính này được thêm vào là để tạo hoạt ảnh dễ dàng hơn. Giả sử bạn muốn tạo hiệu ứng động cho một phần tử như sau

Sử dụng .target:hover { transform: translateX(50%) rotate(30deg) scale(2); /* Only the value of scale() changed */}0

Để triển khai hoạt ảnh này bằng cách sử dụng

.target:hover {
  transform: translateX(50%) rotate(30deg) scale(2); /* Only the value of scale() changed */
}

0, bạn phải tính toán tất cả các giá trị ở giữa cho tất cả các phép biến đổi đã xác định và bao gồm các giá trị đó trong mỗi khung hình chính. Ví dụ: để thực hiện phép quay ở mốc 10%, các giá trị cho các phép biến đổi khác cũng phải được tính toán, bởi vì thuộc tính

.target:hover {
  transform: translateX(50%) rotate(30deg) scale(2); /* Only the value of scale() changed */
}

0 cần tất cả các phép biến đổi đó

Mã CSS kết quả trở thành thế này

@keyframes anim {
  0% { transform: translateX(0%); }
  5% { transform: translateX(5%) rotate(90deg) scale(1.2); }
  10% { transform: translateX(10%) rotate(180deg) scale(1.2); }
  90% { transform: translateX(90%) rotate(180deg) scale(1.2); }
  95% { transform: translateX(95%) rotate(270deg) scale(1.2); }
  100% { transform: translateX(100%) rotate(360deg); }
}

.target {
  animation: anim 2s;
  animation-fill-mode: forwards;
}

Sử dụng các thuộc tính biến đổi riêng lẻ

Với các thuộc tính biến đổi riêng lẻ, điều này trở nên dễ viết hơn nhiều. Thay vì kéo tất cả các chuyển đổi từ khung hình chính sang khung hình chính, bạn có thể nhắm mục tiêu từng biến đổi riêng lẻ. Bạn cũng không cần phải tính toán tất cả các giá trị ở giữa đó nữa

@keyframes anim {
  0% { translate: 0% 0; }
  100% { translate: 100% 0; }

  0%, 100% { scale: 1; }
  5%, 95% { scale: 1.2; }

  0% { rotate: 0deg; }
  10%, 90% { rotate: 180deg; }
  100% { rotate: 360deg; }
}

.target {
  animation: anim 2s;
  animation-fill-mode: forwards;
}

Sử dụng các thuộc tính biến đổi riêng lẻ và một số khung hình chính

Để biến mã của bạn thành mô-đun, bạn có thể chia nhỏ từng hoạt ảnh phụ thành một bộ khung hình chính riêng

@keyframes move {
  0% { translate: 0% 0; }
  100% { translate: 100% 0; }
}

@keyframes scale {
  0%, 100% { scale: 1; }
  5%, 95% { scale: 1.2; }
}

@keyframes rotate {
  0% { rotate: 0deg; }
  10%, 90% { rotate: 180deg; }
  100% { rotate: 360deg; }
}

.target {
  animation: move 2s, scale 2s, rotate 2s;
  animation-fill-mode: forwards;
}

Nhờ sự phân tách này, bạn có thể áp dụng từng bộ khung hình chính riêng biệt theo ý muốn vì các thuộc tính

.target:hover {
  transform: translateX(50%) rotate(30deg) scale(2); /* Only the value of scale() changed */
}

0–hiện đã trở thành các thuộc tính riêng lẻ–không còn ghi đè lẫn nhau. Ở trên, bạn có thể cung cấp cho mỗi lần chuyển đổi một thời gian khác nhau mà không cần phải viết lại toàn bộ

Hiệu suất

Hoạt ảnh sử dụng các thuộc tính mới này cũng hiệu quả như hoạt ảnh của thuộc tính

.target:hover {
  transform: translateX(50%) rotate(30deg) scale(2); /* Only the value of scale() changed */
}

0 hiện có

Hoạt ảnh của translate, rotate và scale chạy trên bộ tổng hợp giống như cách mà hoạt ảnh của

.target:hover {
  transform: translateX(50%) rotate(30deg) scale(2); /* Only the value of scale() changed */
}

0 chạy, vì vậy chúng tốt cho hiệu suất hoạt ảnh giống như cách mà

.target:hover {
  transform: translateX(50%) rotate(30deg) scale(2); /* Only the value of scale() changed */
}

0 chạy

Các thuộc tính mới này cũng hoạt động với thuộc tính

@keyframes anim {
  0% { transform: translateX(0%); }
  5% { transform: translateX(5%) rotate(90deg) scale(1.2); }
  10% { transform: translateX(10%) rotate(180deg) scale(1.2); }
  90% { transform: translateX(90%) rotate(180deg) scale(1.2); }
  95% { transform: translateX(95%) rotate(270deg) scale(1.2); }
  100% { transform: translateX(100%) rotate(360deg); }
}

.target {
  animation: anim 2s;
  animation-fill-mode: forwards;
}

3. Nói chung, tốt nhất là tránh lạm dụng

@keyframes anim {
  0% { transform: translateX(0%); }
  5% { transform: translateX(5%) rotate(90deg) scale(1.2); }
  10% { transform: translateX(10%) rotate(180deg) scale(1.2); }
  90% { transform: translateX(90%) rotate(180deg) scale(1.2); }
  95% { transform: translateX(95%) rotate(270deg) scale(1.2); }
  100% { transform: translateX(100%) rotate(360deg); }
}

.target {
  animation: anim 2s;
  animation-fill-mode: forwards;
}

3 bằng cách sử dụng nó trên số lượng yếu tố tối thiểu cần thiết và trong một khoảng thời gian ngắn nhất có thể. Nhưng càng cụ thể càng tốt. Ví dụ: nếu bạn đang sử dụng

@keyframes anim {
  0% { transform: translateX(0%); }
  5% { transform: translateX(5%) rotate(90deg) scale(1.2); }
  10% { transform: translateX(10%) rotate(180deg) scale(1.2); }
  90% { transform: translateX(90%) rotate(180deg) scale(1.2); }
  95% { transform: translateX(95%) rotate(270deg) scale(1.2); }
  100% { transform: translateX(100%) rotate(360deg); }
}

.target {
  animation: anim 2s;
  animation-fill-mode: forwards;
}

3 để tối ưu hóa hoạt ảnh với các thuộc tính rotate và

@keyframes anim {
  0% { transform: translateX(0%); }
  5% { transform: translateX(5%) rotate(90deg) scale(1.2); }
  10% { transform: translateX(10%) rotate(180deg) scale(1.2); }
  90% { transform: translateX(90%) rotate(180deg) scale(1.2); }
  95% { transform: translateX(95%) rotate(270deg) scale(1.2); }
  100% { transform: translateX(100%) rotate(360deg); }
}

.target {
  animation: anim 2s;
  animation-fill-mode: forwards;
}

7, thì bạn nên khai báo điều này bằng cách sử dụng

@keyframes anim {
  0% { transform: translateX(0%); }
  5% { transform: translateX(5%) rotate(90deg) scale(1.2); }
  10% { transform: translateX(10%) rotate(180deg) scale(1.2); }
  90% { transform: translateX(90%) rotate(180deg) scale(1.2); }
  95% { transform: translateX(95%) rotate(270deg) scale(1.2); }
  100% { transform: translateX(100%) rotate(360deg); }
}

.target {
  animation: anim 2s;
  animation-fill-mode: forwards;
}

8. Điều này tốt hơn một chút so với việc sử dụng

@keyframes anim {
  0% { transform: translateX(0%); }
  5% { transform: translateX(5%) rotate(90deg) scale(1.2); }
  10% { transform: translateX(10%) rotate(180deg) scale(1.2); }
  90% { transform: translateX(90%) rotate(180deg) scale(1.2); }
  95% { transform: translateX(95%) rotate(270deg) scale(1.2); }
  100% { transform: translateX(100%) rotate(360deg); }
}

.target {
  animation: anim 2s;
  animation-fill-mode: forwards;
}

9 trong trường hợp bạn đang tạo hiệu ứng động cho rotate và

@keyframes anim {
  0% { transform: translateX(0%); }
  5% { transform: translateX(5%) rotate(90deg) scale(1.2); }
  10% { transform: translateX(10%) rotate(180deg) scale(1.2); }
  90% { transform: translateX(90%) rotate(180deg) scale(1.2); }
  95% { transform: translateX(95%) rotate(270deg) scale(1.2); }
  100% { transform: translateX(100%) rotate(360deg); }
}

.target {
  animation: anim 2s;
  animation-fill-mode: forwards;
}

7, bởi vì một số cấu trúc dữ liệu mà Chrome tạo trước khi bạn sử dụng

@keyframes anim {
  0% { transform: translateX(0%); }
  5% { transform: translateX(5%) rotate(90deg) scale(1.2); }
  10% { transform: translateX(10%) rotate(180deg) scale(1.2); }
  90% { transform: translateX(90%) rotate(180deg) scale(1.2); }
  95% { transform: translateX(95%) rotate(270deg) scale(1.2); }
  100% { transform: translateX(100%) rotate(360deg); }
}

.target {
  animation: anim 2s;
  animation-fill-mode: forwards;
}

3 khác với

.target:hover {
  transform: translateX(50%) rotate(30deg) scale(2); /* Only the value of scale() changed */
}

0 so với rotate

Bạn có thể có nhiều CSS biến đổi không?

Những yếu tố nào có thể được chuyển đổi CSS?

Chức năng được sử dụng để kết hợp tất cả các phương pháp chuyển đổi với nhau là gì?

Thuộc tính biến đổi trong CSS là gì?