Tinh giản hoạt ảnh CSS3 @keyframes

Question

Một vài tháng trước, tôi đã tạo một CSS3 hoạt hình AT-AT http://www.ruawebdesign.com/css3-at-at. Tôi xây dựng nó chủ yếu là một thử nghiệm học tập và để xem những gì đã có thể sử dụng các tính năng CSS3 mới. Giống như hầu hết mọi thứ chúng tôi xây dựng tôi phát hành nó lên mạng. Tôi đã không mong đợi số lượng lớn lưu lượng truy cập đến trang web mà nó nhận được. Tôi nghĩ có lẽ một vài quan điểm từ bạn bè và đồng nghiệp làm việc nhưng nó vẫn tăng lên vài trăm lượt xem một tuần từ khắp nơi trên thế giới.

Kết quả là tôi muốn làm cho nó được sắp xếp hợp lý hơn một chút liên quan đến việc sử dụng CPU của nó. Đối với một số lý do các hình ảnh động ga bộ nhớ. Tôi sẽ đánh giá cao bất kỳ phản hồi nào từ những người đáng yêu trên stackoverflow cho phép mọi người xem thử nghiệm của tôi mà không cần người hâm mộ của họ tham gia.

Ngoài ra trước khi bất cứ ai đề xuất thay thế javascript/jquery, tôi đã xây dựng nó để kiểm tra khả năng của CSS3.

Xin cảm ơn trước.

Answer 1

Làm việc tốt. Bạn đã mở mắt ra tiềm năng của CSS3 cho hoạt ảnh.

Tôi không thể trả lời những câu hỏi mà bạn hỏi không may, nhưng tôi đang đào tạo để trở thành một phim hoạt hình vì vậy tôi có thể làm cho một số gợi ý để giúp bạn cải thiện hoạt hình của bạn:

1. Lift hai chân tại một thời điểm: Phía trước bên trái và bên phải cùng lúc, sau đó là Phía trước bên phải và ngược lại cùng một lúc. Họ phải đối lập chân để cân bằng.

2. Chân không được nhấc lên nên được trồng trên mặt đất, nhưng di chuyển ngược lại trong cảnh để mô phỏng thực tế là cơ thể đang di chuyển về phía trước so với vị trí của chúng.

3. Vì chân trên mặt đất bị trượt ngược, cơ thể sẽ tự nhiên giảm nhẹ.

4. Nếu bạn muốn thêm chân thực hơn nữa, hãy làm cho cơ thể giảm thêm một chút ngay lập tức sau khi chân nâng lên xuống đất một lần nữa rồi quay trở lại. Điều này sẽ làm cho nó trông giống như trọng lượng đang chuyển sang những chân.