Hoạt ảnh CSS có hoạt động đúng thời gian không?

Question

Tức là, nếu tôi đặt hoạt ảnh mất 1 giây, sẽ luôn mất chính xác 1 giây (tức là bỏ qua các khung hình để đạt được khoảng thời gian đó)?

Phần 2 của câu hỏi của tôi liên quan đến cách sử dụng hoạt ảnh CSS trong các cuộc gọi Javascript không đồng bộ. Tôi sẽ cần phải có thể nhớ lại hình ảnh động khi nó đã hoàn thành.

Answer 1

Thời gian không bảo đảm chính xác. Để chứng minh, tôi thiết lập một test case cho thấy thời gian thay đổi một chút so với nhãn hiệu thứ hai. Đối với phần thứ hai của câu hỏi của bạn, bạn có thể sử dụng sự kiện animationend để khởi động lại sự kiện hoặc bạn cũng có thể đặt để lặp lại (như tôi đã làm trong ví dụ của mình).

Cập nhật Thật khó để giả lập trình duyệt nghẹt thở, nhưng tôi đã nhận thấy độ lệch đáng kể từ hoạt ảnh khi nó đã bị nghẹn một cách tự nhiên. Ví dụ: khi tải trang, Firebug của tôi khởi động, khiến hoạt ảnh đầu tiên nhảy xuống thành 0,574 giây, gần một nửa giá trị ban đầu của tôi. Vì vậy, có vẻ như trình duyệt không cố gắng bù đắp một chút, nhưng nó cũng có thể quá tải. Tôi cũng đã nhìn thấy thời gian miễn là 2 giây, vì vậy tôi không nghĩ rằng bạn có thể nói rằng thời gian là có được chính xác trong bất kỳ cách nào.

Cập nhật 2 Vì vậy, tôi đã có thể get the browser to choke (phải đếm đến 1000000 trong FF ... Tôi rất ấn tượng), và câu trả lời nhanh chóng cho câu hỏi của bạn là không, nó không làm bất cứ bồi thường cho thử và có được thời gian chính xác. Nó chỉ chokes và không animate. Tâm trí bạn đó là một vòng lặp chặt chẽ, do đó, nó có thể thực hiện tốt hơn nếu nó có thể nhận được các tính toán khác trong đó, nhưng tôi không biết điều đó chắc chắn.

Answer 2

Câu trả lời cho câu hỏi của bạn về cơ bản là tất cả here at MDN. Ý chính của nó là:

1. Thời gian không hoàn toàn chính xác, nhưng chúng rất gần.
2. Có các sự kiện kích hoạt tại các thời điểm khác nhau trong quá trình hoạt ảnh (và chuyển tiếp). Bạn có thể đính kèm xử lý sự kiện cho họ.