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
4div { transition-property: all; transition-property: transform; }
5div { transition-property: all; transition-property: transform; }
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;
}
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;
}
div {
transition-property: all;
transition-property: transform;
}
5 [bắt buộc]
div {
transition-property: all;
transition-property: transform;
}
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âyXem 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-property: all;
transition-property: transform;
}
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;
}
div {
transition-property: all;
transition-property: transform;
}
5 div {
transition-duration: 3s;
}
6 [tùy chọn]
div {
transition-duration: 3s;
}
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;
}
53Dướ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-duration: 3s;
}
div {
transition: [property] [duration] [timing-function] [delay];
}
6Ví dụ tốc ký cho div {
transition-duration: 3s;
}
7
div {
transition-duration: 3s;
}
div {
transition: [property] [duration] [timing-function] [delay];
}
8div {
transition-property: all;
transition-property: transform;
}
57 [tùy chọn]
div {
transition-property: all;
transition-property: transform;
}
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 đổiXem 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;
}
div {
transition-property: all;
transition-property: transform;
}
2Mộ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
div {
transition: [property] [duration] [timing-function] [delay];
}
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 đầuXem 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];
}
64Hoặ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];
}
67Ví dụ cú pháp CSS cho
div {
transition: [property] [duration] [timing-function] [delay];
}
60
div {
transition: [property] [duration] [timing-function] [delay];
}
Đừ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
div {
transition: [property] [duration] [timing-function] [delay];
}
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] [duration] [timing-function] [delay];
}
div {
transition-property: all;
transition-property: transform;
}
9
div {
transition: [property] [duration] [timing-function] [delay];
}
85
div {
transition: [property] [duration] [timing-function] [delay];
}
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] [duration] [timing-function] [delay];
}
div {
transition-property: all;
transition-property: transform;
}
3
div {
transition: [property] [duration] [timing-function] [delay];
}
88
div {
transition: [property] [duration] [timing-function] [delay];
}
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à YXem 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] [duration] [timing-function] [delay];
}
div {
transition-property: all;
transition-property: transform;
}
0div {
transition-property: all;
transition-property: transform;
}
1Ghi 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
div {
transition-property: all;
transition-property: transform;
}
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;
}
2kế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
div {
transition-property: all;
transition-property: transform;
}
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;
}
3Xem 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