Animação de rotação CSS3

158

Analisei algumas demos e não tenho idéia do por que não consigo fazer o giro do CSS3 funcionar. Estou usando a versão estável mais recente do Chrome.

O violino: http://jsfiddle.net/9Ryvs/1/

div {
  margin: 20px;
  width: 100px;
  height: 100px;
  background: #f00;
  -webkit-animation-name: spin;
  -webkit-animation-duration: 40000ms;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-name: spin;
  -moz-animation-duration: 40000ms;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: spin;
  -ms-animation-duration: 40000ms;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  -o-transition: rotate(3600deg);
}
<div></div>

iambriansreed
fonte

Respostas:

299

Para usar a animação CSS3, você também deve definir os quadros-chave da animação real ( que você nomeouspin )

Leia https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_animations para obter mais informações

Depois de configurar o tempo da animação, você precisa definir a aparência da animação. Isso é feito estabelecendo dois ou mais quadros-chave usando a @keyframesregra geral. Cada quadro-chave descreve como o elemento animado deve renderizar em um determinado momento durante a sequência de animação.


Demonstração em http://jsfiddle.net/gaby/9Ryvs/7/

@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}
Gabriele Petrioli
fonte
9
Você recebe o ✓ porque explicou melhor e é a única resposta que inclui todas as versões prefixadas.
iambriansreed
53
Isso é super nitpicky, mas você realmente deve animar para 359 graus. 360 e 0 graus são os mesmos radialmente; portanto, a animação é interrompida brevemente por um turno completo.
Adam Grant
1
@AdamGrant Obrigado, isso quase me causou uma dor de cabeça hoje lol
mattslone
5
Você deseja animar para 359.9999999999 graus, não para 359. Os graus de rotação são um intervalo contínuo de [0, 360) e, se você girar para 359.0, terá um tique de 1 grau no início de cada rotação, quando passar de 359 para 0. .
mdonoughe
16
Para esclarecer todos esses comentários que estão fornecendo informações incorretas ... a resposta selecionada ESTÁ CORRETA, sem modificações. 0 e 360 ​​graus são realmente diferentes aos olhos do navegador, enquanto continuam sendo o mesmo ponto. Por exemplo, se você tentar girá-lo de 0deg para 0deg (ou 360deg para 360deg), ele não será rotacionado. Ao girá-lo de 0 a 360 graus, o navegador deve girar o objeto 360 graus antes de concluir a animação. Defina o animation-iteration-count: infinite;e você terá quadros infinitos na animação. Mesmo uma rotação de 20 minutos parecerá perfeita e suave.
27618 jacurtis
28

Você não especificou nenhum quadro-chave. Eu fiz funcionar aqui .

div {
    margin: 20px;
    width: 100px; 
    height: 100px;    
    background: #f00;
    -webkit-animation: spin 4s infinite linear;
}

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

Você pode realmente fazer muitas coisas bem legais com isso. Aqui está um que eu fiz anteriormente .

:)

Nota: Você pode pular a necessidade de escrever todos os prefixos se usar -prefix-free .

Jezen Thomas
fonte
17

Desde o Chrome / FF mais recente e no IE11, não há necessidade do prefixo -ms / -moz / -webkit. Aqui está um código mais curto (com base nas respostas anteriores):

div {
    margin: 20px;
    width: 100px;
    height: 100px;
    background: #f00;

    /* The animation part: */
    animation-name: spin;
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

Demonstração ao vivo: http://jsfiddle.net/9Ryvs/3057/

oriadam
fonte
5
Combine regras de animação com taquigrafia animation: spin 4s linear infinite.
Josh Habdas
10

HTML com glyphicon impressionante de fonte.

<span class="fa fa-spinner spin"></span>

CSS

@-moz-keyframes spin {
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    to {transform:rotate(360deg);}
}

.spin {
    animation: spin 1000ms linear infinite;
}
Pere Pages
fonte
1
Você também terá o meu upvote para adicionar a definição para .spin
Blair Connolly
6

A única resposta que fornece o 359deg correto:

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(359deg); }
}

&.active {
  animation: spin 1s linear infinite;
}

Aqui está um gradiente útil para que você possa provar que está girando (se for um círculo):

background: linear-gradient(to bottom, #000000 0%,#ffffff 100%);
danday74
fonte
4

Para girar, você pode usar quadros-chave e uma transformação.

div {
    margin: 20px;
    width: 100px; 
    height: 100px;    
    background: #f00;
    -webkit-animation-name: spin;
    -webkit-animation-duration: 40000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin;
    -moz-animation-duration: 40000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin;
    -ms-animation-duration: 40000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
}

@-webkit-keyframes spin {
  from {
    -webkit-transform:rotate(0deg);
  }

  to {
    -webkit-transform:rotate(360deg);
  }
}

Exemplo


fonte
4

Para fins de conclusão, aqui está um exemplo do Sass / Compass que realmente reduz o código, o CSS compilado incluirá os prefixos necessários, etc.

div
  margin: 20px
  width: 100px 
  height: 100px    
  background: #f00
  +animation(spin 40000ms infinite linear)

+keyframes(spin)
  from
    +transform(rotate(0deg))
  to
    +transform(rotate(360deg))
miphe
fonte
0
@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

isso fará você responder à pergunta

sudarshan
fonte
Parece ser apenas uma repetição desta resposta existente .
Pang