Hoạt hình css được sử dụng để làm gì?

Hoạt hình CSS. CSS Animations là một kỹ thuật để thay đổi giao diện và hành vi của các thành phần khác nhau trong trang web. Nó được sử dụng để điều khiển các phần tử bằng cách thay đổi chuyển động hoặc hiển thị của chúng. Nó có hai phần, một phần chứa các thuộc tính CSS mô tả hoạt ảnh của các phần tử và phần còn lại chứa các khung hình chính nhất định cho biết các thuộc tính hoạt ảnh của phần tử và các khoảng thời gian cụ thể mà chúng phải xảy ra.  

Quy tắc @keyframes. Khung hình chính là nền tảng mà CSS Animations hoạt động. Chúng xác định cách hiển thị hoạt ảnh ở các giai đoạn tương ứng trong toàn bộ thời lượng của nó. Ví dụ. Trong đoạn mã sau, đoạn văn thay đổi màu sắc theo thời gian. Khi hoàn thành 0%, nó có màu đỏ, khi hoàn thành 50%, nó có màu cam và khi hoàn thành đầy đủ i. e. ở mức 100%, nó có màu nâu.  

Thí dụ. Ví dụ này mô tả Thuộc tính hoạt ảnh CSS bằng thuộc tính trạng thái phát hoạt ảnh, với thuộc tính tốc ký hoạt ảnh

Hoạt hình CSS đang phát triển nhanh chóng để trở thành một công cụ thiết yếu cho các nhà phát triển web. Khi đang thực hiện một dự án, tôi nhận được yêu cầu từ khách hàng là tạo hoạt ảnh phức tạp bắt mắt. Nó dành cho màn hình giật gân bao gồm bốn thẻ thông tin, hoạt ảnh từ trái sang phải khi tải trang. Nói cách khác, nó phải tiết lộ từng yếu tố một cách tinh nghịch và sáng tạo, khiến mọi thứ trở nên thú vị hơn nhiều

Để làm cho hoạt ảnh này phù hợp, chúng tôi có hai tùy chọn, sử dụng Javascript hoặc CSS

Cả hai đều có thể làm hoạt hình ấn tượng. Tuy nhiên, chúng tôi phải chọn một cái phù hợp với mục đích. Sau đó, chúng tôi bắt đầu nghĩ về một số điểm khác biệt chính mà chúng tôi có thể coi là thông số để tìm ra người chiến thắng trong Javascript so với. Hoạt ảnh CSS

khả năng phục hồi

Các quy tắc CSS dễ viết và dễ bảo trì hơn so với Javascript. Một quy tắc CSS bị hỏng sẽ không phá vỡ toàn bộ bố cục, trong khi một lỗi cú pháp đơn lẻ trong Javascript có thể làm hỏng toàn bộ ứng dụng web hoặc buộc người dùng phải tải lại trang

chức năng

Về chức năng, CSS và Javascript tương đối giống nhau

Mặc dù hoạt ảnh Javascript cung cấp khả năng kiểm soát đáng kể đối với hoạt ảnh – tạm dừng, dừng, hoàn nguyên, chạy không đồng bộ lần lượt, đặt trên dòng thời gian và lịch biểu

Hiệu suất

Hiệu suất là một cân nhắc quan trọng khác khi bạn có kế hoạch phát triển chương trình của mình trên nền tảng di động. Nói chung, CSS có hiệu suất tương đối tốt vì nó giảm tải logic hoạt ảnh cho chính trình duyệt, nhờ đó, nó cho phép trình duyệt tối ưu hóa tương tác DOM và mức tiêu thụ bộ nhớ, đồng thời quan trọng nhất là sử dụng GPU để cải thiện hiệu suất. Mặt khác, hiệu suất Javascript có thể từ nhanh hơn hợp lý đến chậm hơn nhiều so với CSS. Hiệu suất Javascript phụ thuộc vào thư viện được sử dụng và đặt gánh nặng lên nhà phát triển để tối ưu hóa

Tối ưu hóa

Hoạt ảnh CSS tốt hơn từ góc độ tối ưu hóa. Trên thực tế, chúng chạy trên GPU nên tốc độ khung hình cao hơn nhiều so với hoạt hình Javascript. Về mặt tích cực, hoạt ảnh CSS không gây ra hiện tượng chỉnh lại và vẽ lại, không giống như sửa đổi các thành phần thông qua Javascript

Những yếu tố này là mối quan tâm chính của tôi. Hoạt ảnh CSS phù hợp hơn với dự án của tôi vì nó cung cấp toàn quyền kiểm soát hoạt ảnh chỉ bằng một khung hình chính

Ngoài ra, để làm việc với các khung hình chính, chúng tôi cần hỗ trợ từ các thuộc tính CSS sau

Biến đổi

CSS Transform cho phép chuyển đổi các phần tử CSS trong không gian hai chiều hoặc ba chiều – từ việc di chuyển phần tử đến thay đổi kích thước phần tử, từ xoay phần tử sang nghiêng phần tử mà không làm thay đổi luồng tài liệu. Khi một phần tử thay đổi trạng thái, nó sẽ kích hoạt Chuyển đổi, chẳng hạn như khi di chuột hoặc nhấp chuột

Có bốn khía cạnh quan trọng của biến đổi

Phiên dịch. Hàm translate() cho phép chúng ta di chuyển một phần tử trên mặt phẳng (trên trục x và y)

tỉ lệ. Hàm scale() cho phép chúng ta thay đổi kích thước một phần tử. Chúng ta có thể mở rộng hoặc thu nhỏ nó

quay. Hàm rotate() cho phép chúng ta tạo một phần tử xoay quanh một điểm cố định. Theo mặc định, nó xoay quanh tâm của phần tử

Nghiêng. Hàm skew() cho phép chúng ta bóp méo một phần tử bằng cách kéo các cạnh của nó dọc theo một đường thẳng

chuyển tiếp

Như tên gợi ý, quá trình chuyển đổi cho phép bạn kiểm soát việc chuyển đổi các phần tử. Nó giúp làm cho quá trình diễn ra suôn sẻ và dần dần. Mặt khác, nếu bạn không có nó, phần tử được chuyển đổi sẽ thay đổi đột ngột từ dạng này sang dạng khác. Hơn nữa, nó được sử dụng rộng rãi cho các hoạt ảnh đơn giản và có thể được áp dụng cho hầu hết các thuộc tính CSS

Bạn có thể tìm thấy danh sách đầy đủ các thuộc tính CSS có thể tạo hoạt ảnh bằng cách sử dụng quá trình chuyển đổi tại đây

https. // nhà phát triển. mozilla. org/en-US/docs/Web/CSS/CSS_animated_properties

Thuộc tính hoạt hình

Chuyển tiếp tạo hiệu ứng chuyển đổi phần tử CSS từ trạng thái này sang trạng thái khác. Nhưng đối với các hoạt ảnh phức tạp hơn yêu cầu hoạt ảnh nhiều thành phần phụ thuộc vào trạng thái, chúng ta có thể sử dụng các thuộc tính hoạt ảnh

Tạo hoạt ảnh CSS bằng thuộc tính hoạt ảnh là quy trình gồm hai bước và yêu cầu khung hình chính và thuộc tính hoạt ảnh

Quy tắc tại @keyframes

Các khung hình chính được sử dụng để chỉ định các giá trị cho các thuộc tính hoạt ảnh ở các giai đoạn khác nhau của hoạt ảnh. Các khung hình chính được chỉ định bằng CSS-at-rule chuyên dụng — @keyframes

/* Cú pháp chuẩn */

@keyframes sinh động {

từ đầu. 0px; . màu xanh lá; . 100px;}

lên {đầu trang. 200px; . màu đen; . 300px;}

}

Để đảm bảo trình duyệt hỗ trợ tối ưu cho khung hình chính CSS của bạn, bạn nên xác định cả bộ chọn 0% và 100%

/* Cú pháp chuẩn */ @keyframes hoạt ảnh {    0%   {top. 0px;}    25%  {top. 200px;}    75%  {top. 50px;}    100% {top. 100px;}

}

Chúng ta có thể tạo các thuộc tính hoạt hình phức tạp bằng cách sử dụng @keyframe. Một hoạt ảnh đơn giản có hai khung hình chính, trong khi một hoạt ảnh phức tạp có một số khung hình chính

Danh sách đầy đủ các thuộc tính hoạt hình phụ có thể được tìm thấy tại

https. // nhà phát triển. mozilla. org/en-US/docs/Web/CSS/animation

Hãy bắt đầu làm việc với các yêu cầu của chúng tôi. Để bắt đầu, hãy tạo bố cục dựa trên thẻ cơ bản

Bước 1

Chúng tôi sẽ tạo bố cục 2 thẻ đơn giản và chúng tôi sẽ thêm hoạt ảnh ở bước 2 bằng cách sử dụng khung hình chính. Vì chúng ta có thể dễ dàng áp dụng quá trình chuyển đổi trên thuộc tính 'vị trí' CSS, nên chúng ta có thể sử dụng nó để đặt các phần tử theo yêu cầu

https. // codepen. io/bút/NWbBrRb

Bước 2

Bây giờ chúng ta đã sẵn sàng bố cục dựa trên thẻ, hãy thêm một số hoạt ảnh vào đó
Đầu tiên, chúng ta cần ẩn các thẻ bằng độ mờ. 0 để các thẻ không hiển thị trước hoạt ảnh

Bây giờ, hãy thêm các khung hình chính cho tên hoạt hình

@keyframes card-animation {

từ {

độ mờ đục. 0;

bên trái. 0;

}

đến {

độ mờ đục. 1;

}

}

Vì chúng ta đã định nghĩa thuộc tính left trong lớp. trước, chúng ta có thể bỏ qua điều đó trong keyframe card-animation

Bước 3

Bây giờ khung hình chính của chúng tôi đã sẵn sàng, hãy thêm nó vào. lớp thẻ cùng với chế độ điền hoạt ảnh

hoạt hình. thẻ-hoạt hình 1s;

chế độ hoạt hình-điền. tiền đạo;

Chúng tôi sẽ phải thêm độ trễ để tạo hoạt ảnh cho từng thẻ một

thẻ-1 {

chậm trễ hoạt hình. 2s;

}

thẻ-2 {

chậm trễ hoạt hình. 3s;

}

Đó là nó. Với mã đơn giản ở trên, chúng tôi có với chúng tôi hình ảnh động thẻ làm việc

https. // codepen. io/bút/ExNpyBz

Bước 4

Để cập nhật nó theo yêu cầu của chúng tôi, hãy thêm 2 thẻ nữa vào nó và áp dụng độ trễ hoạt ảnh tương tự như chúng tôi đã sử dụng trong bước trước

thẻ-3 {

chậm trễ hoạt hình. 4s;

}

thẻ-4 {

chậm trễ hoạt hình. 5s;

}

Hãy xem nó hoạt động như thế nào

https. // codepen. io/bút/zYoLOYo

Phần kết luận

Tóm lại, hãy sử dụng hoạt ảnh CSS để chuyển đổi "một lần" đơn giản hơn, chẳng hạn như chuyển đổi trạng thái phần tử giao diện người dùng. Bên cạnh đó, nó dễ sử dụng hơn JavaScript vì nó cho phép bạn tạo một số hoạt ảnh ấn tượng theo quan điểm của người dùng. Sử dụng hoạt ảnh JavaScript khi bạn muốn có các hiệu ứng nâng cao như nảy, dừng, tạm dừng, tua lại hoặc làm chậm. Nó cung cấp cho bạn nhiều quyền kiểm soát hơn CSS

W3C đang nghiên cứu một thông số kỹ thuật mới có tên là Hoạt ảnh trên web nhằm giải quyết nhiều thiếu sót trong Hoạt ảnh CSS và Chuyển tiếp CSS, cung cấp khả năng kiểm soát thời gian chạy tốt hơn và các tính năng bổ sung. Điều đó có nghĩa là, chúng ta sẽ phải chờ xem mọi thứ kết hợp với nhau như thế nào

CSS có tốt cho hoạt ảnh không?

Tốt hơn là tạo hoạt ảnh bằng CSS hoặc JavaScript?

Làm cách nào để sử dụng thuộc tính hoạt hình CSS?

Sự khác biệt giữa quá trình chuyển đổi CSS và hoạt hình là gì?