Tạo hoạt ảnh CSS với @keyframes

Học những cách tốt nhất để sử dụng CSS đôi khi có thể giống như sau:

Để tránh ^^ Tôi muốn chia sẻ một cách đơn giản và thanh lịch để tạo hoạt ảnh CSS bằng cách sử dụng keyframes. Khi bạn nghĩ về nó, hoạt ảnh của một phần tử thực chất chỉ là thay đổi kiểu hoặc giao diện của phần tử đó từ khoảng thời gian này sang khoảng thời gian khác. Phong cách đó có thể là bất cứ điều gì. Nó có thể là vị trí của phần tử đó trên trang, màu sắc, hình dạng, kích thước của nó. Bạn đặt tên cho nó, bạn có thể tạo hiệu ứng cho nó.

Điều @keyframescung cấp cho chúng tôi là một tập hợp các quy tắc và thời điểm để thay đổi phần tử của chúng tôi theo một cách cụ thể, do đó thiết lập hoạt ảnh.

Đây là một đơn giản keyframeshoạt hình được thay đổi một 100px x 100px div elementvới class “movingBox"từ một hình vuông màu đỏ thành một vòng tròn màu vàng khi nó trượt xuống dưới trang.

Mỗi quy tắc trong chúng tôi keyframes mymovemô tả cách phần tử của chúng tôi sẽ được hiển thị tại một thời điểm cụ thể trong hoạt ảnh của chúng tôi. Ở mức 0% khi hoạt ảnh của chúng tôi bắt đầu, phần tử của chúng tôi là một hình vuông màu đỏ ở đầu trang. Đến mốc 100%, khi hoạt ảnh của chúng ta hoàn thành, hình vuông của chúng ta đã chuyển thành một hình tròn màu vàng cách ranh giới trên cùng của không gian của nó 100px.

Để triển khai hoạt ảnh đơn giản này, div class="movingBox"tất cả những gì chúng ta cần làm là thêm thuộc animationtính vào các .movingBoxkiểu trong CSS của chúng ta.

Các animationbất động sản là một tài sản viết tắt có thể chứa thông tin liên quan:

animation-title: 
animation-duration: 
animation-timing-function: 
animation-delay: 
animation-iteration-count: 
animation-direction: 
animation-fill-mode: 
animation-play-state:

Điều gì sẽ xảy ra nếu chúng ta muốn tạo một hoạt ảnh làm cho một phần tử xuất hiện trên trang trong không khí mỏng? Hãy nghĩ về một trang web mà khi đến nơi, bạn thấy tiêu đề trang được phóng to (hoặc lướt qua) từ một nơi khác và đến ngay giữa trang.

Trong phần của moveInLeft keyframeschúng tôi, chúng tôi đã xác định phần tử của chúng tôi bắt đầu từ vị trí -100px trên trục X ( transform: translateX(-100px)) từ nơi chúng tôi thiết lập nó để ở trong kiểu của chúng tôi cho phần tử. Chúng tôi thấy rằng 80% thông qua hoạt ảnh của chúng tôi, phần tử của chúng tôi đi qua vị trí được chỉ định của nó trên trục X, sau đó hạ cánh chính xác nơi nó được lập trình ở mức 100%.

100% { 
   opacity: 1;
   transform: translate(0)
}

Sử dụng keyframeslà một cách dễ dàng và dễ dàng để tạo hoạt ảnh cho bất kỳ phần tử HTML nào. Nếu bạn chưa thử trước, tôi khuyên bạn nên thiết lập một tài liệu và chơi với nó!