2012-05-07 30 views
13

Tôi đang tự hỏi nếu nó ok để sử dụng giá trị phần trăm như thế này:Có được phép sử dụng bất kỳ giá trị thập phân nào trong hoạt ảnh khung hình CSS không?

@keyframes myAnimation { 
    0% { height: 100px; } 
    33.3% { height: 120px; } 
    66.6% { height: 140px; } 
    100% { height: 200px; } 
} 

Có vẻ như để làm việc, nhưng nó Tôi không chắc chắn nếu các trình duyệt có thể chỉ "vòng" này? Và những gì về các giá trị như 33.3457%? Cảm ơn rất nhiều!

+0

Vâng, giả sử bạn có một hình ảnh động chạy trong 1000 giây. 33% trong số đó là 330 giây trong khi 33,3% là 333 giây. Đó là một sự khác biệt của 3 giây, do đó, có, nó không quan trọng. – Seka

+0

Tôi đã thêm nhận xét trước đó này vì người chỉnh sửa câu hỏi này đã hỏi "nếu có vấn đề" và sau đó xóa nhận xét của anh ấy sau khi tôi trả lời. Tôi không biết tại sao anh ấy lại làm thế, nhưng tôi không muốn để lại bình luận của tôi ở đây mà không có bất kỳ bối cảnh nào ... – Seka

Trả lời

18

Khi nói đến CSS, cần chú ý đến tỷ lệ phần trăm xuống đến 2 chữ số thập phân và sau đó dừng lại. Vì vậy, bạn sẽ có thể nhận được 33,34% nhưng không 33,3457% để sử dụng trong khung hình chính của mình

Tôi hy vọng điều này sẽ hữu ích.

+0

Cảm ơn rất nhiều! Điều đó thực sự hữu ích! – Seka

+2

Tôi không thể tìm thấy bất kỳ văn bản nào trong [đặc tả hình động CSS] (http://www.w3.org/TR/css3-animations/) nói rằng tỷ lệ phần trăm chỉ hợp lệ với hai chữ số thập phân. Chăm sóc để chỉ nó ra? –

+0

Tôi chắc chắn bạn có thể sử dụng nhiều hơn 2 dấu cách thập phân. Ví dụ, Twitter Bootstrap sử dụng 8 dấu thập phân trên phần trăm của họ, và trong khi tôi không biết chắc chắn tôi nghi ngờ rằng họ sẽ làm điều đó trừ khi có một lý do cho nó. –

5

Có, bạn có thể sử dụng phần phân đoạn để xác định tỷ lệ khung hình chính xác hơn. Nhưng độ chính xác như vậy là not clearly specified.

Nó được hỗ trợ bởi tất cả các trình duyệt hỗ trợ hoạt ảnh CSS. Nhưng không sử dụng quá nhiều số thập phân, hành vi lạ có thể xảy ra (đặc biệt là trên 5 chữ số).

tôi sử dụng mà cho hình ảnh động phức tạp với vòng:

@keyframes{ 
    0%, 30%, 40%, 50%, 60%{ 
     top: 0px; 
    } 
    29.99999%, 39.99999%, 49.99999%, 59.99999%{ 
     top: 100px; 
    } 
    100%{ 
     top: 200px; 
    } 
} 
/* 
- 0px to 100px (30%) 
- loop 3 times 0px to 100px (10% each, total 30%) 
- 0px to 200px (40%) 
*/ 

Các Sass mặc định chính xác là 3 chữ số và có thể được thay đổi với --precision (tùy chọn cmd) hoặc Sass::Script::Number.precision