Hoạt ảnh xoay liên tục CSS3 (Giống như đồng hồ mặt trời đang tải)

Tôi đang cố gắng tái tạo chỉ báo hoạt động kiểu Apple (biểu tượng tải mặt trời) bằng cách sử dụng hoạt ảnh PNG và CSS3. Tôi có hình ảnh xoay và thực hiện liên tục, nhưng dường như có độ trễ sau khi hoạt ảnh kết thúc trước khi thực hiện lần quay tiếp theo.

@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
  }
  to { 
    -webkit-transform: rotate(360deg);
  }
}
#loading img
{
    -webkit-animation-name:             rotate; 
    -webkit-animation-duration:         0.5s; 
    -webkit-animation-iteration-count:  infinite;
    -webkit-transition-timing-function: linear;
    }

Tôi đã thử thay đổi thời lượng hoạt ảnh nhưng nó không có gì khác biệt, nếu bạn làm chậm nó ngay lập tức là 5s thì rõ ràng hơn là sau lần quay đầu tiên sẽ có một khoảng dừng trước khi nó quay lại. Đó là sự tạm dừng này mà tôi muốn thoát khỏi.

Bất kỳ sự giúp đỡ được đánh giá cao, cảm ơn.

Vấn đề của bạn ở đây là bạn đã cung cấp một -webkit-TRANSITION-timing-functionkhi bạn muốn một -webkit-ANIMATION-timing-function. Các giá trị từ 0 đến 360 của bạn sẽ hoạt động bình thường.

Bạn cũng có thể nhận thấy một chút độ trễ vì 0deg và 360deg là cùng một vị trí, vì vậy nó đang đi từ vị trí 1 trong một vòng tròn trở lại vị trí 1. Nó thực sự không đáng kể, nhưng để khắc phục, tất cả những gì bạn phải làm là thay đổi 360deg thành 359deg

jsfiddle của tôi minh họa hoạt ảnh của bạn:

#myImg {
    -webkit-animation: rotation 2s infinite linear;
}

@-webkit-keyframes rotation {
    from {-webkit-transform: rotate(0deg);}
    to   {-webkit-transform: rotate(359deg);}
}

Ngoài ra, những gì có thể giống hơn của biểu tượng tải quả táo sẽ là một hoạt ảnh chuyển đổi độ mờ / màu của các sọc màu xám thay vì xoay biểu tượng.

Bạn có thể sử dụng hoạt ảnh như thế này:

-webkit-animation: spin 1s infinite linear;

@-webkit-keyframes spin {
    0%   {-webkit-transform: rotate(0deg)}
    100% {-webkit-transform: rotate(360deg)}
}

Nếu bạn chỉ đang tìm kiếm một phiên bản webkit thì đây là điều tiện lợi: http://s3.amazonaws.com/37assets/svn/463-single_spinner.html từ http://37signals.com/svn/posts/2577-loading- spinner-animation-using-css-and-webkit

Mã của bạn có vẻ đúng. Tôi cho rằng đó là điều gì đó liên quan đến thực tế là bạn đang sử dụng .png và cách trình duyệt vẽ lại đối tượng khi xoay là không hiệu quả, gây ra hiện tượng treo (bạn đang thử nghiệm trình duyệt nào?)

Nếu có thể, hãy thay thế .png bằng một cái gì đó gốc.

xem; http://kilianvalkhof.com/2010/css-xhtml/css3-loading-spinners-without-images/

Chrome không cho tôi tạm dừng khi sử dụng phương pháp này.

Tôi đã tạo một thư viện nhỏ cho phép bạn dễ dàng sử dụng một cách dễ dàng mà không cần hình ảnh.

Nó sử dụng CSS3 nhưng lại rơi vào JavaScript nếu trình duyệt không hỗ trợ nó.

// First argument is a reference to a container element in which you
// wish to add a throbber to.
// Second argument is the duration in which you want the throbber to
// complete one full circle.
var throbber = throbbage(document.getElementById("container"), 1000);

// Start the throbber.
throbber.play();

// Pause the throbber.
throbber.pause();

Ví dụ .