CSS transition được sử dụng rộng rãi trong thiết kế website nhằm tạo ra những hiệu ứng hấp dẫn, thu hút người xem và giúp website trở nên ấn tượng hơn. Vì vậy quá trình chuyển đổi là gì?
lục mục
- Chuyển đổi là gì?
- Chức năng của nhóm thuộc tính chuyển tiếp
- Các thuộc tính chuyển tiếp
- Thuộc tính chuyển tiếp
- Thuộc tính chuyển tiếp – tài sản
- Thuộc tính chuyển tiếp – thời lượng
- Thuộc tính transition – delay
- Thuộc tính transition – timing – function
- Cách sử dụng Transition trong CSS
- Create a convert, convert
- Rotate section – Xoay
- Tạo hiệu ứng đối với skew []
- Create a effect shift section translate[]
- Tạo hiệu ứng chuyển động thu phóng phần tử tỷ lệ []
- Xem bài viết Hướng dẫn chia cột với float của Phan Đỗ Hoàng Nhật [@hoangnhata2] trên CodePen. Tạo hiệu ứng kết hợp
- Tổng kết
Chuyển đổi là gì?
Chuyển đổi là thuật ngữ chỉ chuyển động, chuyển đổi. Trong thiết kế web kế tiếp, quá trình chuyển đổi là việc chuyển đổi từ trạng thái này sang trạng thái khác một cách mượt mà hơn
Chuyển đổi được sử dụng phổ biến trong việc thiết kế trang web hiệu ứng hấp dẫn như dịch chuyển, xoay, thu, phóng,… Giúp tạo ấn tượng đẹp mắt cho người nhìn.
Chức năng của nhóm thuộc tính chuyển tiếp
Chức năng chủ yếu của nhóm thuộc tính chuyển đổi Được sử dụng để thiết lập các hiệu ứng luôn chuyển đổi giá trị cho một thuộc tính bất kỳ của một phần từ đó. Tức là chuyển đổi phần tử từ trạng thái này sang trạng thái khác
Ví dụ. Một phần tử ở bên dưới có kích thước chiều rộng mặc định là 500px, khi bạn di chuyển con trỏ đến hình ảnh đó thì hình ảnh đó có thể đột ngột phóng to kích thước lên 800px hoặc 1000px
Nhưng việc sử dụng nhóm chuyển tiếp CSS có thể giúp thiết lập các hiệu ứng chuyển đổi giá trị cho thuộc tính chiều rộng của phần tử giúp tăng chiều rộng một cách từ từ, người dùng sẽ cảm thấy sự mượt mà, thú vị và bắt mắt hơn
Các thuộc tính chuyển tiếp
Dưới đây là các thuộc tính chuyển đổi cơ bản được sử dụng nhiều nhất trong CSS mà bạn có thể tham khảo
Thuộc tính chuyển tiếp
Là cú pháp tổng hợp được sử dụng để thiết lập các hiệu ứng luân chuyển giá trị cho các thuộc tính của phân tử. Thay vì hợp nhất các thuộc tính chuyển tiếp riêng lẻ, bạn có thể sử dụng một thuộc tính chuyển đổi là đủ
cú pháp. quá trình chuyển đổi - thời gian thời lượng thuộc tính - độ trễ chức năng. Trong đó, thuộc tính, thời lượng, thời gian – chức năng, độ trễ lần cuối cùng là giá trị của 4 thuộc tính
div.quayphantu { width: 200px; height: 100px; margin-top: 30px; background-color: #32CD32; transform: rotate[45deg]; }
0rotate[45deg]div.quayphantu { width: 200px; height: 100px; margin-top: 30px; background-color: #32CD32; transform: rotate[45deg]; }
1rotate[45deg]div.quayphantu { width: 200px; height: 100px; margin-top: 30px; background-color: #32CD32; transform: rotate[45deg]; }
2rotate[45deg]div.quayphantu { width: 200px; height: 100px; margin-top: 30px; background-color: #32CD32; transform: rotate[45deg]; }
3rotate[45deg]
Mặc dù vậy, thuộc tính chuyển đổi không bắt buộc phải gán đủ 4 giá trị trên. Những giá trị thuộc tính nào còn thiếu thì trình duyệt sẽ tự động áp dụng giá trị mặc định của thuộc tính đó
Thuộc tính chuyển tiếp – tài sản
Thuộc tính
div.quayphantu { width: 200px; height: 100px; margin-top: 30px; background-color: #32CD32; transform: rotate[45deg]; }0 được sử dụng để xác định thuộc tính mà bạn muốn tạo hiệu ứng chuyển đổi luân phiên giá trị cho nó khi phân tử đó thay đổi trạng tháirotate[45deg]
cú pháp.
div.quayphantu { width: 200px; height: 100px; margin-top: 30px; background-color: #32CD32; transform: rotate[45deg]; }1. Trong đó, giá trị có thể được xác định dựa trên một trong 5 giá trị saurotate[45deg]
div.quayphantu { width: 200px; height: 100px; margin-top: 30px; background-color: #32CD32; transform: rotate[45deg]; }
2. Không tạo hiệu ứng luân chuyển giá trị cho bất kỳ thuộc tính nàorotate[45deg]div.quayphantu { width: 200px; height: 100px; margin-top: 30px; background-color: #32CD32; transform: rotate[45deg]; }
3. Tạo hiệu ứng chuyển tiêu chuẩn cho tất cả các thuộc tínhrotate[45deg]div.quayphantu { width: 200px; height: 100px; margin-top: 30px; background-color: #32CD32; transform: rotate[45deg]; }
4. Chỉ định cụ thể một thuộc tính mà bạn muốn tạo ra hiệu ứng luân chuyểnrotate[45deg]div.quayphantu { width: 200px; height: 100px; margin-top: 30px; background-color: #32CD32; transform: rotate[45deg]; }
5. Use default value [tức là thuộc tínhrotate[45deg]div.quayphantu { width: 200px; height: 100px; margin-top: 30px; background-color: #32CD32; transform: rotate[45deg]; }
0 có giá trịrotate[45deg]div.quayphantu { width: 200px; height: 100px; margin-top: 30px; background-color: #32CD32; transform: rotate[45deg]; }
2]rotate[45deg]div.quayphantu { width: 200px; height: 100px; margin-top: 30px; background-color: #32CD32; transform: rotate[45deg]; }
8. Kế thừa giá trị thuộc tínhrotate[45deg]div.quayphantu { width: 200px; height: 100px; margin-top: 30px; background-color: #32CD32; transform: rotate[45deg]; }
0từ một phần tử cha của nórotate[45deg]
Lưu ý. Nếu bạn muốn tạo hiệu ứng luân chuyển giá trị cho nhiều thuộc tính [nhưng không phải là tất cả] thì khi thiết lập giá trị cho thuộc tính này, bạn cần phải khai báo đầy đủ tên của các thuộc tính bạn muốn tạo hiệu . Và đừng quên thêm một dấu “,” ngăn cách giữa các thuộc tính
Thuộc tính chuyển tiếp – thời lượng
Thuộc tính dùng để thiết lập “thời thượng” của hiệu ứng luân chuyển giá trị. Trợ giúp xác định thời gian được bao nhiêu giây – s hay mili giây – s mà hiệu ứng chuyển đổi cần thiết để hoàn thành
cú pháp.
div.quayphantu { width: 200px; height: 100px; margin-top: 30px; background-color: #32CD32; transform: rotate[45deg]; }00. in which.rotate[45deg]
div.quayphantu { width: 200px; height: 100px; margin-top: 30px; background-color: #32CD32; transform: rotate[45deg]; }01 được xác định với 3 giá trị thuộc tính saurotate[45deg]
div.quayphantu { width: 200px; height: 100px; margin-top: 30px; background-color: #32CD32; transform: rotate[45deg]; }
02. Chỉ xác định một số giây hoặc mili giây thời gian nhất định mà hiệu ứng chuyển đổi cần thiết để hoàn tất. With default value is 0, tức thời là hiệu ứng không có hiệu lựcrotate[45deg]div.quayphantu { width: 200px; height: 100px; margin-top: 30px; background-color: #32CD32; transform: rotate[45deg]; }
5. Reset setting thuộc tính mặc định của nórotate[45deg]div.quayphantu { width: 200px; height: 100px; margin-top: 30px; background-color: #32CD32; transform: rotate[45deg]; }
8. Thừa hưởng lại một giá trị từ bộ chọn bên ngoàirotate[45deg]
Thuộc tính transition – delay
Thuộc tính
div.quayphantu { width: 200px; height: 100px; margin-top: 30px; background-color: #32CD32; transform: rotate[45deg]; }05 được sử dụng để xác định khoảng thời gian mà hiệu ứng chuyển đổi cần phải bắt đầu, với giá trị được tính bằng giây [s] hoặc mili giây [ms]. Value value bằng 0rotate[45deg]
cú pháp.
div.quayphantu { width: 200px; height: 100px; margin-top: 30px; background-color: #32CD32; transform: rotate[45deg]; }00. in whichrotate[45deg]
div.quayphantu { width: 200px; height: 100px; margin-top: 30px; background-color: #32CD32; transform: rotate[45deg]; }
02. cần xác định số giây hoặc mili giây cần chờ đợi trước khi bắt đầu hiệu ứngrotate[45deg]div.quayphantu { width: 200px; height: 100px; margin-top: 30px; background-color: #32CD32; transform: rotate[45deg]; }
5. Redefault setting thuộc tính mặc địnhrotate[45deg]div.quayphantu { width: 200px; height: 100px; margin-top: 30px; background-color: #32CD32; transform: rotate[45deg]; }
8. Thừa hưởng lại những giá trị từ bộ chọn bọc bên ngoàirotate[45deg]
Thuộc tính transition – timing – function
Là một thuộc tính sử dụng khi một hiệu ứng luân chuyển giá trị diễn ra, mặc định hiệu ứng sẽ chuyển động chậm ở giai đoạn đầu, tăng dần ở giai đoạn giữa và chậm lại ở giai đoạn cuối
Tính năng sử dụng thuộc tính
div.quayphantu { width: 200px; height: 100px; margin-top: 30px; background-color: #32CD32; transform: rotate[45deg]; }00 có thể giúp thiết lập lại tốc độ chuyển động của hiệu ứng trong từng giai đoạnrotate[45deg]
cú pháp. giá trị. Trong đó, giá trị được xác định dựa trên 7 loại giá trị sau
div.quayphantu { width: 200px; height: 100px; margin-top: 30px; background-color: #32CD32; transform: rotate[45deg]; }
01. Duy trì tốc độ từ đầu đến cuốirotate[45deg]div.quayphantu { width: 200px; height: 100px; margin-top: 30px; background-color: #32CD32; transform: rotate[45deg]; }
02. Speed speed ở giai đoạn đầu, giảm dần ở giai đoạn giữa, giảm tốc ở giai đoạn cuốirotate[45deg]div.quayphantu { width: 200px; height: 100px; margin-top: 30px; background-color: #32CD32; transform: rotate[45deg]; }
03. quay lại ở giai đoạn đầu và nhanh ở giai đoạn saurotate[45deg]div.quayphantu { width: 200px; height: 100px; margin-top: 30px; background-color: #32CD32; transform: rotate[45deg]; }
04. Nhanh ở giai đoạn đầu và chậm ở giai đoạn saurotate[45deg]div.quayphantu { width: 200px; height: 100px; margin-top: 30px; background-color: #32CD32; transform: rotate[45deg]; }
05. Tốc độ chuyển động chậm ở giai đoạn đầu và cuối, nhanh ở giai đoạn giữarotate[45deg]div.quayphantu { width: 200px; height: 100px; margin-top: 30px; background-color: #32CD32; transform: rotate[45deg]; }
5. Một giá trị mặc định –rotate[45deg]div.quayphantu { width: 200px; height: 100px; margin-top: 30px; background-color: #32CD32; transform: rotate[45deg]; }
02rotate[45deg]div.quayphantu { width: 200px; height: 100px; margin-top: 30px; background-color: #32CD32; transform: rotate[45deg]; }
8. Kế thừa giá trị thuộc tínhrotate[45deg]div.quayphantu { width: 200px; height: 100px; margin-top: 30px; background-color: #32CD32; transform: rotate[45deg]; }
00 từ phần tử cha của nórotate[45deg]
Nếu nhìn qua, các thuộc tính của
div.quayphantu { width: 200px; height: 100px; margin-top: 30px; background-color: #32CD32; transform: rotate[45deg]; }00 vàrotate[45deg]
div.quayphantu { width: 200px; height: 100px; margin-top: 30px; background-color: #32CD32; transform: rotate[45deg]; }01 tương đối giống nhau, vì đều tạo ra những hiệu ứng chuyển động cho phần tử. Tuy nhiên, hiệu ứng chuyển động thuộc nhómrotate[45deg]
div.quayphantu { width: 200px; height: 100px; margin-top: 30px; background-color: #32CD32; transform: rotate[45deg]; }00 sẽ chỉ xảy ra khi phần tử bị thay đổi trạng thái do tác động của người dùng. Còn hiệu ứng chuyển động của nhóm thuộc tínhrotate[45deg]
div.quayphantu { width: 200px; height: 100px; margin-top: 30px; background-color: #32CD32; transform: rotate[45deg]; }01 thì được thiết kế theo khuôn khổ sẵn có, chuyển động bất kỳ lúc nào mà không phụ thuộc vào tác động của người dùngrotate[45deg]
Cách sử dụng Transition trong CSS
Bạn có thể sử dụng các loại thuộc tính chuyển đổi để biến đổi hiển thị phần từ như dịch chuyển, thu phóng, xoay,… Hiệu ứng chuyển đổi cũng có thể sử dụng cho nhiều thuộc tính của CSS như nền – màu sắc, chiều cao,
Create a convert, convert
Ví dụ. Tạo hộp hiệu ứng thay đổi chiều rộng khi di chuột vào phần tử, hiệu ứng trong 3 giây
div.quayphantu { width: 200px; height: 100px; margin-top: 30px; background-color: #32CD32; transform: rotate[45deg]; }4rotate[45deg]
Xem Bút hướng dẫn chia cột với float của Phan Đỗ Hoàng Nhật
[@hoangnhata2] trên CodePen.
Rotate section – Xoay
Ví dụ. Tạo hiệu ứng xoay với xoay. Roo phần tử đi khoảng 45 độ
div.quayphantu { width: 200px; height: 100px; margin-top: 30px; background-color: #32CD32; transform: rotate[45deg]; }rotate[45deg]
Xem Bút hướng dẫn chia cột với float của Phan Đỗ Hoàng Nhật
[@hoangnhata2] trên CodePen.
Lưu ý. Mặc dù phần gốc quay phần tử nằm ở giữa phần tử, được thiết lập bằng thuộc tính chuyển tiếp – gốc. Mặc định thì biến đổi – gốc sẽ là 50% 50 % chính là giữa các phần tử
Nếu góc quay thay thế là ở góc biến đổi thứ nhất – gốc sẽ là 0% 0% hoặc biến đổi – gốc. trên cùng bên trái
Tạo hiệu ứng đối với skew []
div.quayphantu { width: 200px; height: 100px; margin-top: 30px; background-color: #32CD32; transform: rotate[45deg]; }0rotate[45deg]
Lưu ý. Nghiên cứu phần tử skew sẽ sử dụng phương thức skew [x – angle, y – angle]
Xem Bút hướng dẫn chia cột với float của Phan Đỗ Hoàng Nhật
[@hoangnhata2] trên CodePen.
Create a effect shift section translate[]
div.quayphantu { width: 200px; height: 100px; margin-top: 30px; background-color: #32CD32; transform: rotate[45deg]; }0rotate[45deg]
Lưu ý. Phương thức sử dụng translate [x,y] để thay đổi vị trí phần tử thêm một đoạn x, y nào đó
Xem Bút hướng dẫn chia cột với float của Phan Đỗ Hoàng Nhật
[@hoangnhata2] trên CodePen.
Tạo hiệu ứng chuyển động thu phóng phần tử tỷ lệ []
div.quayphantu { width: 200px; height: 100px; margin-top: 30px; background-color: #32CD32; transform: rotate[45deg]; }0rotate[45deg]
Lưu ý. Phần tử zoom sẽ sử dụng phương thức scale [x – scale, y – scale]
Xem Bút hướng dẫn chia cột với float của Phan Đỗ Hoàng Nhật
[@hoangnhata2] trên CodePen.
Tạo hiệu ứng kết hợp
Ví dụ. Kết hợp hiệu ứng xoay và chuyển đổi đồng thời
div.quayphantu { width: 200px; height: 100px; margin-top: 30px; background-color: #32CD32; transform: rotate[45deg]; }9rotate[45deg]
Xem Bút hướng dẫn chia cột với float của Phan Đỗ Hoàng Nhật
[@hoangnhata2] trên CodePen.
Tổng kết
Trên đây là một số gợi ý về cách tạo chuyển động với quá trình chuyển đổi trong CSS cơ bản mà Onlycssmenu đã tổng hợp và chia sẽ. Để ứng dụng thấm nhuần và thuận lợi trong thực tiễn, bạn cần tìm hiểu và luyện tập nhiều lần để ghi nhớ từng hiệu ứng và cách làm nhé. Chúc bạn thành công