Hoạt ảnh khác với chuyển đổi css như thế nào?

Bài đăng này sẽ giới thiệu cho bạn các chuyển đổi CSS và chuyển đổi CSS. cặp đôi quyền lực CSS. Khi được sử dụng cùng nhau, các thuộc tính này cho phép bạn tạo hoạt ảnh đơn giản và thêm phản hồi trực quan và tương tác có giá trị cho người dùng của bạn

Chỉ cần nhớ khi thêm bất kỳ loại chuyển động nào vào dự án của bạn để giữ cho nó đơn giản, tinh tế và nhất quán. Chuyển động bạn tạo phải truyền đạt ý nghĩa, luôn nâng cao, không làm sao lãng sự tương tác cho người dùng của bạn

Vậy biến đổi và chuyển tiếp là gì?

chuyển tiếp CSS. một lời giới thiệu

Hãy bắt đầu với các hiệu ứng chuyển tiếp CSS. Chuyển đổi là chất bôi trơn trong bánh xe chuyển đổi CSS. Nếu không có sự chuyển đổi, một phần tử được chuyển đổi sẽ thay đổi đột ngột từ trạng thái này sang trạng thái khác. Bằng cách áp dụng một quá trình chuyển đổi, bạn có thể kiểm soát sự thay đổi, làm cho nó diễn ra suôn sẻ và dần dần

Di chuột bên dưới

Xem Pen With and Without Transition của Rachel Cope (@rachelcope) trên CodePen

Trong bài đăng này, tôi sẽ sử dụng các hiệu ứng chuyển tiếp kết hợp với các phép biến đổi. Tuy nhiên, các hiệu ứng chuyển tiếp cũng có thể được sử dụng ở nơi khác khi các phần tử thay đổi từ kiểu này sang kiểu khác (e. g. , khi một nút đổi màu khi di chuột)

Có hai thuộc tính được yêu cầu để quá trình chuyển đổi có hiệu lực

1. div {
     transition-property: all;
     transition-property: transform;
   }
   

   4

2. div {
     transition-property: all;
     transition-property: transform;
   }
   

   5

Ghi chú. Tốc ký chuyển tiếp

Mỗi thuộc tính chuyển đổi có thể được xác định riêng lẻ, nhưng để mã sạch hơn và nhanh hơn, bạn nên sử dụng tốc ký chuyển tiếp

Đây là trình tự tốc ký đầy đủ. Một lần nữa, hai thuộc tính đầu tiên là bắt buộc

div {
  transition: [property] [duration] [timing-function] [delay];
}

div { transition-property: all; transition-property: transform; } 4 (bắt buộc)

div {
  transition-property: all;
  transition-property: transform;
}

4 chỉ định thuộc tính CSS mà quá trình chuyển đổi sẽ được áp dụng. Bạn có thể áp dụng chuyển đổi sang một thuộc tính riêng lẻ (e. g. ,

div {
  transition-property: all;
  transition-property: transform;
}

8 hoặc

div {
  transition-property: all;
  transition-property: transform;
}

9) hoặc cho tất cả các thuộc tính trong bộ quy tắc (i. e. ,

  div {
    transition-duration: 3s;
  }

0)

Ví dụ cú pháp CSS cho div { transition-property: all; transition-property: transform; } 4

div {
  transition-property: all;
  transition-property: transform;
}

div { transition-property: all; transition-property: transform; } 5 (bắt buộc)

Thuộc tính

div {
  transition-property: all;
  transition-property: transform;
}

5 chỉ định khoảng thời gian của quá trình chuyển đổi. Bạn có thể chỉ định bằng giây hoặc mili giây

Xem Thời lượng dịch bút của Rachel Cope (@rachelcope) trên CodePen

Ví dụ cú pháp CSS cho div { transition-property: all; transition-property: transform; } 5

  div {
    transition-duration: 3s;
  }

Ví dụ tốc ký cho div { transition-property: all; transition-property: transform; } 5

div {
  transition-property: all;
  transition-property: transform;
}

5

div { transition-duration: 3s; } 6 (tùy chọn)

Thuộc tính

  div {
    transition-duration: 3s;
  }

7 cho phép bạn xác định tốc độ chuyển đổi trong khoảng thời gian. Thời gian mặc định là

  div {
    transition-duration: 3s;
  }

8, bắt đầu chậm, nhanh chóng tăng tốc và sau đó chậm lại ở cuối. Các tùy chọn thời gian khác là.

  div {
    transition-duration: 3s;
  }

9,

  div {
    transition-duration: 3s;
  }

8,

div {
  transition-property: all;
  transition-property: transform;
}

51,

div {
  transition-property: all;
  transition-property: transform;
}

52 và

div {
  transition-property: all;
  transition-property: transform;
}

53

Dưới đây là ví dụ về các tùy chọn thời gian khác nhau (được sử dụng với thuộc tính

div {
  transition-property: all;
  transition-property: transform;
}

54)

Xem Thời gian chuyển đổi bút của Rachel Cope (@rachelcope) trên CodePen

Đối với các tùy chọn thời gian nâng cao hơn, bạn có thể xác định chức năng thời gian tùy chỉnh với khối bezier

Ví dụ cú pháp CSS cho div { transition-duration: 3s; } 7

div {
  transition: [property] [duration] [timing-function] [delay];
}

6

Ví dụ tốc ký cho div { transition-duration: 3s; } 7

div {
  transition: [property] [duration] [timing-function] [delay];
}

8

div { transition-property: all; transition-property: transform; } 57 (tùy chọn)

Thuộc tính

div {
  transition-property: all;
  transition-property: transform;
}

57 cho phép bạn chỉ định khi nào quá trình chuyển đổi sẽ bắt đầu. Theo mặc định, quá trình chuyển đổi bắt đầu ngay khi nó được kích hoạt (e. g. , khi di chuột). Tuy nhiên, nếu bạn muốn quá trình chuyển đổi bắt đầu sau khi nó được kích hoạt, bạn có thể sử dụng thuộc tính trì hoãn quá trình chuyển đổi

Xem ví dụ về độ trễ chuyển đổi bút của Rachel Cope (@rachelcope) trên CodePen

Ví dụ tốc ký cho div { transition-property: all; transition-property: transform; } 57

div {
  transition-property: all;
  transition-property: transform;
}

2

Một giá trị âm sẽ bắt đầu quá trình chuyển đổi ngay lập tức, nhưng là một phần của quá trình chuyển đổi

biến đổi CSS. một lời giới thiệu

Bây giờ chúng ta đã xem xét cách thực hiện các chuyển đổi dần dần và mượt mà, hãy xem các biến đổi CSS - cách làm cho một phần tử thay đổi từ trạng thái này sang trạng thái khác. Với thuộc tính biến đổi CSS, bạn có thể xoay, di chuyển, nghiêng và chia tỷ lệ các phần tử. (Bài đăng này sẽ chỉ đề cập đến các phép biến đổi 2D, nhưng hãy theo dõi các bài đăng trên blog trong tương lai về các phép biến đổi 3D. )

Các biến đổi được kích hoạt khi một phần tử thay đổi trạng thái, chẳng hạn như khi di chuột hoặc nhấp chuột. Các ví dụ trong bài đăng này sẽ chứng minh các biến đổi khi di chuột

Để đơn giản, tôi sẽ chỉ sử dụng các phiên bản chưa được trộn sẵn trong các ví dụ của mình. Tuy nhiên, bạn có thể muốn bao gồm các tiền tố để đảm bảo nó hoạt động trong các trình duyệt hiện đại

div { transition: [property] [duration] [timing-function] [delay]; } 60

Giá trị

div {
  transition: [property] [duration] [timing-function] [delay];
}

60 cho phép bạn tăng hoặc giảm kích thước của một phần tử

Ví dụ: giá trị

div {
  transition: [property] [duration] [timing-function] [delay];
}

62 sẽ biến đổi kích thước thành 2 lần kích thước ban đầu. Giá trị

div {
  transition: [property] [duration] [timing-function] [delay];
}

63 sẽ biến kích thước thành một nửa kích thước ban đầu

Xem Bút biến hình. Quy mô của Rachel Cope (@rachelcope) trên CodePen

Bạn có thể chia tỷ lệ phần tử bằng cách đặt tham số cho chiều rộng (trục X) hoặc chiều cao (trục Y). Ví dụ,

div {
  transition: [property] [duration] [timing-function] [delay];
}

64

Hoặc, sử dụng tốc ký

div {
  transition: [property] [duration] [timing-function] [delay];
}

65 để chia tỷ lệ cả hai trục cùng một lúc.

div {
  transition: [property] [duration] [timing-function] [delay];
}

66. Hoặc xác định chúng độc lập với nhau.

div {
  transition: [property] [duration] [timing-function] [delay];
}

67

Ví dụ cú pháp CSS cho div { transition: [property] [duration] [timing-function] [delay]; } 60

Đừng quên thêm một quá trình chuyển đổi. Nếu không áp dụng quá trình chuyển đổi, phần tử sẽ đột ngột thay đổi kích thước. Thêm quá trình chuyển đổi vào bộ chọn gốc (không phải bộ chọn di chuột). Để làm cho quá trình chuyển đổi diễn ra suôn sẻ trên cả hover-over/hover-off

div {
  transition-property: all;
  transition-property: transform;
}

2

div { transition: [property] [duration] [timing-function] [delay]; } 69

Với giá trị

div {
  transition: [property] [duration] [timing-function] [delay];
}

69, phần tử quay theo chiều kim đồng hồ hoặc ngược chiều kim đồng hồ theo một số độ được chỉ định. Giá trị dương, chẳng hạn như

div {
  transition: [property] [duration] [timing-function] [delay];
}

81, xoay phần tử theo chiều kim đồng hồ, trong khi giá trị âm, chẳng hạn như

div {
  transition: [property] [duration] [timing-function] [delay];
}

82, xoay phần tử ngược chiều kim đồng hồ

Xem ví dụ về Pen Transform Rotate của Rachel Cope (@rachelcope) trên CodePen

Bạn có thể xoay nhiều hơn một vòng quay đầy đủ với các số trên 360, chẳng hạn như

div {
  transition: [property] [duration] [timing-function] [delay];
}

83, cho ba vòng quay đầy đủ

Ví dụ cú pháp CSS cho div { transition: [property] [duration] [timing-function] [delay]; } 69

div {
  transition-property: all;
  transition-property: transform;
}

9

div { transition: [property] [duration] [timing-function] [delay]; } 85

Giá trị

div {
  transition: [property] [duration] [timing-function] [delay];
}

85 di chuyển một phần tử sang trái/phải và lên/xuống. Chuyển động dựa trên các tham số được cung cấp cho các trục X (ngang) Y (dọc)

Giá trị X dương sẽ di chuyển phần tử sang phải, trong khi giá trị X âm sẽ di chuyển phần tử sang trái. Giá trị Y dương di chuyển phần tử xuống dưới và giá trị Y âm di chuyển lên trên

Trong ví dụ này, phần tử sẽ di chuyển 20 pixel sang phải và 20 pixel xuống dưới

Xem Bút biến hình. Dịch bởi Rachel Cope (@rachelcope) trên CodePen

Ví dụ cú pháp CSS cho div { transition: [property] [duration] [timing-function] [delay]; } 85

div {
  transition-property: all;
  transition-property: transform;
}

3

div { transition: [property] [duration] [timing-function] [delay]; } 88

Với giá trị

div {
  transition: [property] [duration] [timing-function] [delay];
}

88, phần tử nghiêng (hoặc nghiêng) theo hướng này hay hướng khác dựa trên các giá trị được cung cấp cho trục X và Y

Xem Bút biến hình. Skew của Rachel Cope (@rachelcope) trên CodePen

Giá trị X dương nghiêng phần tử sang trái, trong khi giá trị X âm nghiêng phần tử sang phải. Giá trị Y dương nghiêng phần tử xuống và giá trị Y âm nghiêng phần tử lên. Hoặc sử dụng cách viết tắt để bao gồm cả thuộc tính X và Y

Ví dụ cú pháp CSS cho div { transition: [property] [duration] [timing-function] [delay]; } 88

div {
  transition-property: all;
  transition-property: transform;
}

0

div {
  transition-property: all;
  transition-property: transform;
}

1

Ghi chú. Xiên một phần tử cũng sẽ làm lệch tất cả các phần tử con bên trong phần tử. Nếu bạn cần duy trì góc ban đầu của phần tử con, bạn có thể sử dụng giá trị ngược lại của skew để đưa nó trở lại

div { transition-property: all; transition-property: transform; } 21

Thuộc tính

div {
  transition-property: all;
  transition-property: transform;
}

21 tách biệt với thuộc tính biến đổi nhưng hoạt động song song với nó. Nó cho phép bạn chỉ định vị trí gốc của phép biến đổi. Theo mặc định, điểm gốc nằm ở trung tâm của phần tử

Ví dụ: nếu bạn đang sử dụng thuộc tính

div {
  transition-property: all;
  transition-property: transform;
}

23 nhưng muốn thuộc tính đó không xoay từ tâm mà từ góc trên cùng bên trái, bạn sẽ sử dụng giá trị

div {
  transition-property: all;
  transition-property: transform;
}

24 hoặc

div {
  transition-property: all;
  transition-property: transform;
}

25. Đối với góc dưới cùng bên phải, bạn sẽ sử dụng

div {
  transition-property: all;
  transition-property: transform;
}

26 hoặc

div {
  transition-property: all;
  transition-property: transform;
}

27, v.v.

Xem ví dụ về Pen Transform Origin của Rachel Cope (@rachelcope) trên CodePen

Đảm bảo thêm thuộc tính gốc biến đổi vào phần tử gốc, không phải với thuộc tính biến đổi trong bộ chọn di chuột

div {
  transition-property: all;
  transition-property: transform;
}

2

kết hợp biến đổi

Bạn có thể kết hợp nhiều biến đổi bằng cách sử dụng tốc ký biến đổi hoặc phương thức ma trận

Viết tắt của div { transition-property: all; transition-property: transform; } 21

Tốc ký biến đổi cho phép bạn xâu chuỗi các phương thức biến đổi khác nhau thành một thuộc tính

div {
  transition-property: all;
  transition-property: transform;
}

3

Xem Biến đổi Kết hợp Bút của Rachel Cope (@rachelcope) trên CodePen

ma trận

Phương pháp ma trận cho phép bạn kết hợp các thuộc tính tỷ lệ, độ nghiêng và dịch thành một thuộc tính bằng hệ tọa độ. Điều này có thể rất hữu ích để thao tác các phép biến đổi bằng thư viện javascript nhưng rất khó thực hiện bằng tay. Bạn có thể đọc thêm về phương pháp ma trận và tọa độ

Cái gì tiếp theo?

Tiếp theo, hãy lấy những gì bạn đã học ở đây và kết hợp các biến đổi CSS với hoạt ảnh CSS để tạo hoạt ảnh và tương tác phức tạp hơn - Hướng dẫn dành cho người mới bắt đầu về hoạt ảnh CSS

Hoạt hình khác với chuyển đổi như thế nào?

Sự khác biệt giữa chuyển tiếp và hoạt hình trong HTML là gì?

Bạn có thể tạo hiệu ứng chuyển đổi CSS không?

Mục đích của hoạt ảnh và chuyển tiếp là gì?