Cách sử dụng Chuyển tiếp & Ảnh động CSS3 để làm nổi bật các thay đổi giao diện người dùng

Các nhà thiết kế và nghệ sĩ có một lịch sử lâu dài thử nghiệm chuyển động, hiệu ứng và các loại ảo ảnh khác nhau với mục đích thêm một lớp bổ sung vào tác phẩm của họ. Phong trào nghệ thuật op bắt đầu sử dụng ảo ảnh quang học vào những năm 1960 để tạo ấn tượng về chuyển động.

Kể từ đó, các cách tiếp cận mới hơn và mới hơn đã xuất hiện, chẳng hạn như nghệ thuật động học phổ biến gần đây giúp mở rộng quan điểm của người xem bằng cách sử dụng chuyển động đa chiều. Chuyển động cũng xuất hiện trong khoa học máy tính với việc phát minh ra con trỏ nhấp nháy đầu tiên vào năm 1967.

Các phần tử DOM phát triển ở mặt trước thường được JavaScript hoạt hình trước khi CSS3 được phát hành và đó là một phương thức vẫn hoạt động, nhưng các thuộc tính mới được CSS3 giới thiệu cho phép chúng tôi nâng cao thiết kế của mình với các hiệu ứng và chuyển động khác nhau một cách trực quan hơn.

Hai kỹ thuật chính CSS3 cung cấp là chuyển tiếp và hình ảnh động. Trong bài đăng này, chúng tôi sẽ xem xét chúng là gì, sự khác biệt giữa chúng và cách bạn có thể sử dụng chúng.

Chuyển tiếp

Chuyển tiếp và hình ảnh động đều được sử dụng để hình dung những thay đổi trong trạng thái của một yếu tố HTML bởi sửa đổi một hoặc nhiều thuộc tính CSS của nó.

Hình thức đơn giản nhất của trực quan hóa thay đổi trạng thái là thay đổi màu của nút hoặc liên kết khi nó được di chuột vào. Khi nó xảy ra, phần tử có một kiểu hơi khác, thường được người xem chú ý như thể có gì đó di chuyển trên màn hình.

Thay đổi thuộc tính CSS của một liên kết trên di chuột (hoặc tiêu điểm hoặc nhấp chuột) là hình thức chuyển đổi lâu đời nhất và đơn giản nhất và nó đã tồn tại trước thời đại CSS3.

 a màu: cam;  a: hover màu: đỏ;  a: tập trung màu: xanh;  a: đã truy cập màu: xanh; 

Chuyển đổi được sử dụng khi một phần tử HTML thay đổi từ trạng thái được xác định trước sang trạng thái khác. CSS3 đã giới thiệu các thuộc tính mới cho phép trực quan hóa tinh vi hơn trước, chẳng hạn như chức năng thời gian hoặc kiểm soát thời lượng.

Chúng ta sẽ xem xét các thuộc tính CSS mới trong phần tiếp theo, sau khi hiểu hoạt ảnh khác nhau như thế nào. Bây giờ, hãy xem những điều quan trọng nhất bạn cần biết về chuyển đổi.

1. Họ luôn có một trạng thái bắt đầu và kết thúc.
2. Các trạng thái giữa điểm bắt đầu và điểm kết thúc được trình duyệt xác định ngầm, chúng tôi không thể thay đổi điều đó bằng CSS.
3. Họ đòi hỏi kích hoạt rõ ràng, chẳng hạn như thêm một lớp giả mới bằng CSS hoặc một lớp mới của jQuery.

Bạn có thể thấy một ví dụ tuyệt đẹp về các chuyển đổi CSS3 được sử dụng thông minh bên dưới, trong đó tác giả tiết lộ thông tin ẩn theo cách không xâm phạm nhưng vẫn khiến người dùng tập trung vào nội dung mới.

Ảnh động

Nếu chúng ta muốn hình dung các thay đổi trạng thái bằng các chuyển động phức tạp hơn hoặc nếu chúng ta không có trình kích hoạt rõ ràng, ví dụ: Nếu chúng tôi muốn bắt đầu hiệu ứng khi tải trang, hình ảnh động là cách để đi.

Ảnh động cho phép xác định đường dẫn phức tạp hơn bằng cách đặt và định cấu hình đường dẫn của chúng ta khung hình chính. Khung hình chính là những điểm trung gian trong quá trình hoạt hình, cho phép chúng ta thay đổi phong cách của yếu tố hoạt hình nhiều lần chúng ta muốn.

Mặc dù CSS3 cung cấp những cách tuyệt vời để xây dựng hình ảnh động tinh vi, nhưng việc tạo ra chúng thường khó hơn so với chuyển đổi, đó là lý do tại sao có nhiều thư viện hoạt hình tuyệt vời ngoài đó, có thể tạo điều kiện cho công việc của chúng tôi.

Những điều quan trọng nhất bạn cần biết về hoạt hình CSS3 bao gồm:

1. họ không yêu cầu kích hoạt rõ ràng, họ có thể bắt đầu tải trang hoặc khi một sự kiện DOM khác diễn ra trong trình duyệt
2. chúng có thể được sử dụng trong các trường hợp khi chuyển đổi được sử dụng, ví dụ như khi một lớp mới hoặc lớp giả mới được thêm hoặc xóa (mặc dù đó là trường hợp sử dụng ít thường xuyên hơn)
3. họ yêu cầu chúng tôi xác định một số khung hình chính (trạng thái trung gian)
4. chúng ta có thể chỉ định số lượng, tần suất và kiểu dáng của các khung hình chính này

Trong ví dụ dưới đây, bạn có thể thấy một menu thả xuống hoạt hình thú vị. Hoạt hình bắt đầu khi chúng ta nhấp vào nút. Điều này đạt được bằng cách thêm các lớp bổ sung vào các thành phần danh sách với jQuery khi sự kiện nhấp xảy ra.

Các lớp mới này được hoạt hình với chỉ định @keyframes quy tắc trong tệp CSS. Các lớp bổ sung được jQuery loại bỏ khi người dùng nhấp vào nút vào lần tiếp theo và menu sẽ bị ẩn lần nữa.

Thuộc tính CSS và @keyframes Theo quy tắc

Để chuyển đổi, chúng ta có thể sử dụng quá độ thuộc tính tốc ký, hoặc 4 thuộc tính liên quan đến chuyển tiếp: chuyển đổi tài sản, thời gian chuyển tiếp, chức năng chuyển thời gian, và chuyển tiếp chậm trễ. Thuộc tính tốc ký chứa tất cả các thuộc tính đơn ở dạng viết tắt.

Đối với hình ảnh động có hoạt hình thuộc tính tốc ký trong tay chúng ta, không đại diện cho ít hơn 8 thuộc tính hoạt hình đơn lẻ, cụ thể là tên hoạt hình, Thời lượng hoạt ảnh, hoạt hình-thời gian-chức năng, hoạt hình chậm trễ, hoạt hình-lặp đi lặp lại, hướng hoạt hình, chế độ hoạt hình-điền, và hoạt hình-chơi-trạng thái.

Điều quan trọng nhất với cả chuyển tiếp và hoạt hình là chúng ta luôn luôn cần chỉ định các thuộc tính CSS sẽ được sửa đổi trong khi thay đổi trạng thái. Với các hiệu ứng chuyển tiếp, nó trông như thế này:

 .phần tử nền: màu cam; chuyển đổi-tài sản: nền; thời gian chuyển tiếp: 3 giây; chuyển tiếp-thời gian-chức năng: dễ dàng;  .element: hover nền: đỏ; 

Chúng tôi đã chỉ định lý lịch tài sản, bởi vì đây là những gì sẽ được thay đổi trong quá trình chuyển đổi.

Chúng tôi có thể thay đổi nhiều thuộc tính CSS trong một lần chuyển đổi, trong trường hợp này, mã ở trên sẽ được sửa đổi như sau: chuyển tiếp-tài sản: nền, biên giới;. Chúng tôi cũng có thể sử dụng chuyển đổi tài sản: tất cả;, nếu chúng tôi không muốn chỉ định riêng từng tài sản.

Chúng ta có thể chọn tốc ký quá độ tài sản là tốt. Nếu chúng ta làm như vậy, chúng ta luôn cần chú ý đến thứ tự đúng của các thuộc tính bên trong (xem cú pháp trong tài liệu).

 .phần tử nền: màu cam; chuyển tiếp: nền 3s dễ dàng;  .element: hover nền: đỏ; 

Nếu chúng tôi muốn tạo một hình ảnh động, chúng tôi được yêu cầu chỉ định các liên quan khung hình chính. Các thuộc tính CSS cần được sửa đổi trong định nghĩa riêng @keyframes theo quy tắc. Đây là một ví dụ về cách chúng ta có thể làm điều này:

 .phần tử vị trí: tương đối; tên hoạt hình: slide; thời lượng hoạt hình: 3 giây; hoạt hình-thời gian-chức năng: dễ dàng;  @keyframes slide 0% left: 0;  50% trái: 200px;  100% trái: 400px; 

Trong ví dụ trên, chúng tôi đã tạo ra một hiệu ứng trượt rất đơn giản. Chúng tôi đã định nghĩa tên hoạt hình, sau đó ràng buộc 3 khung hình chính với nó mà chúng tôi đã chỉ định trong @keyframes slide ' theo quy tắc. Tỷ lệ phần trăm đề cập đến thời lượng của hình ảnh động, vì vậy 50% xảy ra ở 1,5 giây trong ví dụ.

Chúng ta có thể sử dụng tốc ký hoạt hình cũng như hoặc có thể định nghĩa các khung hình chính với đơn giản hơn từ đến quy tắc theo cách sau:

 .phần tử vị trí: tương đối; hình ảnh động: slide 3s dễ dàng;  @keyframes trượt từ left: 0;  đến trái: 400px; 

Việc tạo ra các hình ảnh động phức tạp hơn là hình thức nghệ thuật của riêng nó, nếu bạn quan tâm, bạn có thể đọc hai trong số các hướng dẫn hoạt hình của chúng tôi về cách tạo một marquee nâng cao và cách tạo hiệu ứng nảy.

Khi xây dựng chuyển tiếp và hình ảnh động, bạn cần biết rằng không phải tất cả các thuộc tính CSS đều có thể là hình động, vì vậy, luôn luôn là một ý tưởng tốt để kiểm tra thuộc tính bạn muốn thay đổi trong CSS Animizable.

Hoạt hình và chuyển đổi CSS3 đã hoạt động với tiền tố của nhà cung cấp trong một thời gian dài, mà chúng tôi không phải sử dụng nữa, tuy nhiên Mạng lưới Nhà phát triển Mozilla vẫn khuyên bạn nên thêm -webkit tiền tố trong một thời gian, vì sự hỗ trợ cho các trình duyệt dựa trên Webkit chỉ đạt được sự ổn định gần đây.