Hoạt ảnh CSS3 với biến đổi làm cho các phần tử mờ trên Webkit

Question

Vì vậy, tôi có một số yếu tố gốc (div s) với các hiệu ứng khác nhau được áp dụng cho chúng (border-radius, box-shadow và transform: scale()). Khi tôi tạo ảnh động cho họ, hai điều kỳ lạ xảy ra:

1. Mặc dù tôi không cố gắng làm sống động quy mô, nếu tôi không đặt tỷ lệ trong hoạt ảnh, nó sẽ bị bỏ qua.
2. Khi tôi đặt quy mô trong hoạt hình, Webkit làm mờ các yếu tố

Xem ví dụ ở đây: http://jsfiddle.net/trolleymusic/RHeCL/ - các nút ở phía dưới sẽ kích hoạt các vấn đề.

Vấn đề đầu tiên cũng xảy ra trong Firefox, vì vậy tôi đoán đó là vì đó là cách hoạt động của thông số hoạt ảnh. Không phải những gì tôi muốn, nhưng ok, tôi sẽ sống với nó.

Vấn đề thứ hai chỉ là lạ. Tôi biết nó phải làm với 3d biến đổi bởi vì nếu tôi (chỉ cho mục đích thử nghiệm) khai báo -webkit-perspective hoặc -webkit-transform-style: preserve-3d; trên các yếu tố vòng tròn, nó cũng gây ra vấn đề mờ. Sự nhầm lẫn của tôi là tôi không cố biến đổi chỉ mục z như tất cả, và tôi cũng đã thử hình động bằng cách sử dụng hoàn toàn translateY thay vì translate.

Điều này xảy ra trong Chrome (18), Chrome Canary (20) và Safari (5.1.2 & 5.1.4).

Vì vậy, tôi có đúng trong những gì tôi nghĩ đang xảy ra không? Và làm thế nào tôi có thể tránh được sự mờ nhạt?

Kịch bản xấu nhất: Tôi chỉ có thể sử dụng các kích thước khác nhau cho các yếu tố thay vì mở rộng quy mô, đó không thực sự là vấn đề - nhưng tôi nghĩ đây sẽ là giải pháp thanh lịch hơn và bây giờ vấn đề này đã bị cắt.

Answer 1

Tham khảo câu trả lời này là tại sao nó làm mờ các yếu tố: https://stackoverflow.com/a/4847445/814647

Tổng hợp diễn biến trên: WebKit là lấy kích thước ban đầu/CSS trước hiệu ứng động, và đối xử với nó như là một hình ảnh, THEN quy mô nó lên , tạo ra sự mờ nhạt.

Giải pháp: Thực hiện kích thước ban đầu với quy mô lớn nhất và bắt đầu với kích thước thấp hơn (trong trường hợp bạn muốn tăng kích thước lên 5 và đặt tỷ lệ ban đầu thành 0,2)

CẬP NHẬT

lý do nó bỏ qua quy mô hiện tại từ những gì tôi hiểu là vì bạn không đặc biệt chỉ đặt mức dịch (tôi nhìn lên CSS cho nó bây giờ). Khi bạn chạy -webkit-animation, nó đặt lại tất cả các biến đổi hiện tại của bạn (quy mô), vì vậy bạn cần phải chắc chắn rằng bạn có quy mô của bạn trong đó. Tôi đang tìm kiếm css để thay đổi để nó chỉ thay đổi vị trí:

Answer 2

Cách tốt nhất tôi thấy là đợi hoạt ảnh hoàn tất, sau đó áp dụng biến đổi trực tiếp cho phần tử và xóa lớp hoạt ảnh. Một cái gì đó như thế này làm việc cho tôi, sản xuất không ổn định:

$m.bindOnce($m('win-text'), 'webkitAnimationEnd', function(){ //avoid blurred problem with animating scale property in webkit 
    $m('win-text').style.webkitTransform = 'scale(1.5) translateY(-60px)'; 
    $m.removeClass($m('win-text'), 'final'); 
}); 

Tôi đang sử dụng một thư viện khác với jQuery, nhưng bạn có ý tưởng.