Tạm dừng & Lặp lại Ảnh động CSS bằng WAIT! Animate
Có rất nhiều thứ bạn có thể làm với hoạt hình CSS thuần túy, nhưng tạm dừng và lặp một hình ảnh động là không thể với thông số W3 hiện tại.
Nhưng với một công cụ miễn phí như CHỜ ĐỢI! Animate bạn thực sự có thể tạo hình động lặp từ đầu với sự chậm trễ tùy chỉnh giữa mỗi vòng lặp. Điều này có vẻ như là một nhiệm vụ trần tục nhưng nó giải quyết một điểm đau cho nhiều nhà phát triển.
Cần lưu ý rằng có một thuộc tính CSS được gọi là hoạt hình chậm trễ mà trì hoãn khởi đầu của một hình ảnh động CSS. Tuy nhiên nó không ảnh hưởng đến hoạt hình lặp lại vì nó chỉ trì hoãn điểm bắt đầu.
CHỜ ĐỢI! Animate tự động tính toán có bao nhiêu tạm dừng cần được đặt trong các khung hình chính hoạt hình tùy chỉnh để tạo thời gian tạm dừng chính xác bạn cần giữa các vòng lặp. Điều này có thể được thực hiện bằng tay nhưng nó cực kỳ phức tạp, chưa kể siêu khó chịu.
Ứng dụng web này có thể làm việc với bất kỳ tính năng hoạt hình CSS3 nào, bao gồm các phép quay và biến đổi. Bạn không viết bất kỳ thuộc tính CSS mới nào mà là xây dựng trên đầu trang của tính năng khung hình chính để tạo ra tạm dừng dựa trên tỷ lệ phần trăm (từ 0% đến 100%) trong hoạt hình.
Kiểm tra trang chủ để xem một vài ví dụ trong hành động. Rõ ràng những gì bạn có thể làm và mã nguồn ở ngay đó để sao chép / dán vào tác phẩm của riêng bạn.
Xin lưu ý đây là không phải là một thư viện chính thức. Đó là một máy phát điện tạo mã CSS của bạn một cách nhanh chóng dựa trên bất cứ điều gì bạn cần cho sự chậm trễ hoạt hình.
Nếu bạn muốn một giải pháp đơn giản hơn ngoài trang web thì bạn có thể tải về Sass mixin. Đây là một chút phức tạp hơn bởi vì nó đòi hỏi một bản đồ Sass, vì vậy bạn sẽ cần hiểu cách thêm thuộc tính tùy chỉnh và viết đúng cú pháp của bạn.
Đây là một ví dụ về cách bạn gọi mixin:
@include WaitAnimate ((animationName: animName, keyframes: (0: (Transform: scale (1), màu nền: xanh dương), 50: (Transform: scale (2), màu nền: xanh lá cây), 100: (biến đổi : scale (3), màu nền: đỏ)), thời lượng: 2, WaitTime: 1, timeFunction: easy, iterationCount: infinite));
Các nhà phát triển web chuyên nghiệp sẽ không gặp vấn đề gì khi học các sợi dây và xây dựng nó thành một mixin có thể tái sử dụng. Nhưng các nhà phát triển mới có thể đấu tranh để làm cho nó hoạt động, do đó ứng dụng web.
Tất cả điều này mã nguồn có sẵn miễn phí trên GitHub nếu bạn muốn tải về một bản sao cục bộ. Nhưng vì đây là một tính năng kỳ lạ nên nó không phải là thứ bạn có thể cần trong nhiều dự án. Đó là lý do tại sao! Ứng dụng web động không quá đủ để giúp bạn giải quyết vấn đề một lần của trì hoãn hoạt ảnh lặp với CSS thuần.
Đây là một bản hack thực sự thú vị mà thiết kế cũng khá mơ hồ. Nhưng nó chỉ cho thấy mức độ khả thi với CSS3 và một chút khéo léo.
