Animação de rotação contínua CSS3 (como um relógio de sol de carregamento)

120

Estou tentando replicar um indicador de atividade no estilo Apple (ícone de carregamento do relógio de sol) usando uma animação PNG e CSS3. Eu tenho a imagem girando e fazendo isso continuamente, mas parece haver um atraso após a animação terminar antes de fazer a próxima rotação.

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

Tentei alterar a duração da animação, mas não faz diferença. Se você desacelerar, digamos 5s, é mais evidente que, após a primeira rotação, há uma pausa antes de girar novamente. É dessa pausa que quero me livrar.

Qualquer ajuda é muito apreciada, obrigado.

animation webkit css transform Gcoop
fonte
14
O código específico do Webkit não o torna menos CSS3. Considerando que nenhum dos outros provedores fornecia funções iguais naquele momento :)
19h
4
A animação não deve ser executada de 0 a 359? Se executasse de 0 a 360, você teria o quadro em 0 reproduzido duas vezes, já que o quadro 0 e o quadro 360 seriam os mesmos ...
Brad Parks
1
@BradParks Por outro lado, se você passar de 0 a 359, a animação que deve ocorrer em 359.5 será ignorada completamente. Na maioria dos casos, a sobreposição de 0 e 360 ​​será tão rápida quanto imperceptível.
Blazemonger
@Blazemonger não necessariamente. Você pode experimentá-lo em um jsfiddle e ver que, dependendo da duração da animação, pode não ser tão sutil.
Ilan Biala
1
toda essa coisa de '359 graus' é boba - você não tem controle sobre o passo da animação. assumindo uma animação de 1 segundo com 60fps que é de 6 graus por quadro, então você deve parar em '354 graus'. mas como eu disse, você não tem controle sobre a taxa de quadros aqui, então é bem inútil. Eu imagino que uma implementação inteligente possa detectar 0-360 e ajustar em conformidade. Eu apenas multipliquei o tempo e o ângulo por 100 - ou seja. 0 graus a 36000 graus, para que a falha teórica ocorra apenas a cada 100 rotações. mas eu descobri que você está indo para obter falhas de animação não importa o que você faz de qualquer maneira
Simon_Weaver

Respostas:

71

Seu problema aqui é que você forneceu um -webkit-TRANSITION-timing-functionquando deseja -webkit-ANIMATION-timing-function. Seus valores de 0 a 360 funcionarão corretamente.

rrahlf
fonte
Um erro típico de copiar e colar. Muito obrigado! (Na verdade, recebi meu css do shareaholic e, devido à propriedade nomeada incorretamente, ele usou a easefunção de tempo padrão ).
Dokman
55

Você também pode notar um pequeno atraso, porque 0deg e 360deg são o mesmo local, portanto, ele vai do ponto 1 em um círculo de volta ao ponto 1. É realmente insignificante, mas para corrigi-lo, basta alterar 360deg para 359deg

meu jsfiddle ilustra sua animação: 

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

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

Além disso, o que poderia ser mais parecido com o ícone de carregamento de maçã seria uma animação que transita a opacidade / cor das listras de cinza em vez de girar o ícone.

Ilan Biala
fonte
3
Seu JS Fiddle contém a implementação mais sucinta que já vi na rotação simples de imagens - perfeita (e obrigada por postar).
Philip Murphy
obrigado, deixe-me saber se você precisar de outra ajuda, a propósito, usei os prefixos do webkit para a animação, mas você também deve incluir os prefixos do mozilla, porque eles usam a regra -moz-css.
Ilan Biala
você também pode multiplicar o tempo e o ângulo por 100 - ou seja. 0 ° C a 36000 graus :-)
Simon_Weaver
O @Simon_Weaver ainda precisaria ter 35999deg para não ver nenhum quadro duplo.
Ilan Biala
2
@IlanBiala, exceto que duvido muito que sua placa de vídeo esteja rodando a 720fps ;-) É impossível saber qual é o incremento entre os quadros sem conhecer a taxa de quadros. Se quiser, você também pode colocar 348 graus, porque a meio segundo a 60fps cada quadro avançará 12 graus. Eu prefiro apenas colocar 360 e espero que alguém inteligente programado o navegador para ajustar automaticamente
Simon_Weaver
27

Você pode usar animação como esta:

-webkit-animation: spin 1s infinite linear;

@-webkit-keyframes spin {
    0%   {-webkit-transform: rotate(0deg)}
    100% {-webkit-transform: rotate(360deg)}
}
Kinglybird
fonte
2
Solução impressionante e fácil!
TheLD
1

Seu código parece correto. Eu presumo que isso esteja relacionado ao fato de você estar usando.

Se possível, substitua o .png por algo nativo.

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

O Chrome não me pausa usando esse método.

Alex
fonte
Perfeito, tenho certeza de que sua suposição está correta, mas estou usando um PNG porque meu ícone de carregamento não é um relógio de sol, é um símbolo de estilo nuclear ... Não precisa ser assim, para que eu possa alterá-lo para o método que você sugerir - obrigado!
Gcoop
1

Criei uma pequena biblioteca que permite usar facilmente um throbber sem imagens.

Ele usa CSS3, mas recorre ao JavaScript se o navegador não o suportar.

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

Exemplo .

alex
fonte