Animacja ciągłego obracania CSS3 (podobnie jak zegar słoneczny)

Próbuję odtworzyć wskaźnik aktywności w stylu Apple (ikona ładowania zegara słonecznego) za pomocą animacji PNG i CSS3. Mam obraz obracający się i robi to w sposób ciągły, ale wydaje się, że jest opóźnienie po zakończeniu animacji przed wykonaniem następnego obrotu.

@-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 to nie ma znaczenia, jeśli zwolnisz go od razu powiedzieć 5s jego po prostu bardziej widoczne, że po pierwszym obrocie jest pauza, zanim obróci się ponownie. To ta pauza, której chcę się pozbyć.

Każda pomoc jest bardzo mile widziana, dzięki.
Author: Daniel Daranas, 2010-04-06
Source

6 answers

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

 71
Author: rrahlf,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-06-10 13:21:19

Możesz również zauważyć małe opóźnienie, ponieważ 0deg i 360deg są tym samym miejscem, więc przechodzi z miejsca 1 w okręgu z powrotem do miejsca 1. Jest to naprawdę nieistotne, ale aby to naprawić, wystarczy zmienić 360deg na 359deg

Mój 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 może być bardziej podobne do ikony ładowania apple, byłaby animacja, która zmienia krycie / kolor pasków szarości zamiast obracania ikony.

 49
Author: Ilan Biala,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-09-07 19:25:15

Możesz użyć animacji w ten sposób: 

-webkit-animation: spin 1s infinite linear;

@-webkit-keyframes spin {
    0%   {-webkit-transform: rotate(0deg)}
    100% {-webkit-transform: rotate(360deg)}
}
 26
Author: Kinglybird,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-12-31 08:32:51
 8
Author: Tudor,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-10-28 05:51:52

Twój kod wydaje się poprawny. Przypuszczam, że to ma coś wspólnego z faktem, że używasz.png i sposób, w jaki przeglądarka przerysowuje obiekt po rotacji jest nieefektywny, powodując zawieszenie (w jakiej przeglądarce testujesz?)

Jeśli to możliwe wymień .png z czymś rodzimym.

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

Chrome nie daje mi żadnych pauz przy użyciu tej metody.

 1
Author: Alex,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-04-06 10:52:24

Zrobiłem małą bibliotekę , która pozwala na łatwe korzystanie z 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 .

 1
Author: alex,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-08-21 07:26:03