CSS3 Ciągłe obracanie animacji (podobnie jak wczytujący zegar słoneczny)

Próbuję odtworzyć wskaźnik aktywności w stylu Apple (ikona ładowania zegara słonecznego) za pomocą animacji PNG i CSS3. Obraz jest obracany i robię to w sposób ciągły, ale po zakończeniu animacji wydaje się, że po zakończeniu animacji następuje opóźnienie, zanim wykona ona następny obrót.

@-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;
    }

Próbowałem zmienić czas trwania animacji, ale nie ma to znaczenia, jeśli zwolnisz ją od razu, powiedz 5 s, po prostu bardziej widoczne jest to, że po pierwszym obrocie jest przerwa, zanim ponownie się obróci. To jest ta przerwa, której chcę się pozbyć.

Każda pomoc jest mile widziana, dzięki.

Twój problem polega na tym, że podałeś, -webkit-TRANSITION-timing-functionkiedy chcesz -webkit-ANIMATION-timing-function. Twoje wartości od 0 do 360 będą działać poprawnie.

Możesz również zauważyć niewielkie opóźnienie, ponieważ 0 stopni i 360 stopni to to samo miejsce, więc przechodzi z miejsca 1 w kółku z powrotem do punktu 1. To naprawdę nieistotne, ale aby to naprawić, wystarczy zmienić 360 stopni na 359deg

my jsfiddle ilustruje twoją animację:

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

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

Również to, co bardziej przypomina ikonę ładowania jabłka, to animacja, która zmienia przezroczystość / kolor pasków szarości zamiast obracać ikonę.

Możesz użyć takiej animacji:

-webkit-animation: spin 1s infinite linear;

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

Jeśli szukasz tylko wersji zestawu internetowego, jest to fajne: http://s3.amazonaws.com/37assets/svn/463-single_spinner.html z http://37signals.com/svn/posts/2577-loading- animacja-spinner-using-css-and-webkit

Twój kod wydaje się poprawny. Przypuszczam, że ma to coś wspólnego z faktem, że używasz pliku .png, a sposób, w jaki przeglądarka przerysowuje obiekt po obróceniu, jest nieefektywny, powodując zawieszenie (pod jaką przeglądarką testujesz?)

Jeśli to możliwe, zastąp plik .png czymś natywnym.

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

Chrome nie daje mi przerw przy użyciu tej metody.

Zrobiłem małą bibliotekę, która pozwala łatwo używać pulsatora bez obrazów.

Używa CSS3, ale wraca do JavaScript, jeśli przeglądarka go nie obsługuje.

// 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();

Przykład .