Animazione Spin CSS3


158

Ho esaminato alcune demo e non ho idea del perché non riesco a far funzionare il giro CSS3. Sto usando l'ultima versione stabile di Chrome.

Il 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>

Risposte:


299

Per usare l'animazione CSS3 devi anche definire i fotogrammi chiave di animazione effettivi ( che hai nominatospin )

Leggi https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_animations per maggiori informazioni

Dopo aver configurato i tempi dell'animazione, è necessario definire l'aspetto dell'animazione. Questo viene fatto stabilendo due o più fotogrammi chiave usando la @keyframesregola at. Ogni fotogramma chiave descrive come deve essere eseguito il rendering dell'elemento animato in un determinato momento durante la sequenza di animazione.


Demo su 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);}
}

9
Ottieni il ✓ perché l'hai spiegato meglio e sei l'unica risposta che includeva tutte le versioni con prefisso.
iambriansreed il

53
Questo è super nitido, ma dovresti davvero farlo animare a 359 gradi. 360 e 0 gradi sono gli stessi radialmente, quindi l'animazione si fermerebbe così brevemente a giro completo.
Adam Grant,

1
@AdamGrant Grazie, questo mi ha quasi causato mal di testa oggi lol
mattslone,

5
Si desidera animare a 359.9999999999 gradi, non a 359. I gradi di rotazione sono un intervallo continuo di [0, 360) e se si ruota a 359.0 si avrà un segno di spunta di 1 grado all'inizio di ogni rotazione quando si deforma da 359 a 0 .
mdonoughe

16
Per chiarire tutti questi commenti che forniscono informazioni errate ... la risposta selezionata È CORRETTA senza modifiche. 0 e 360 ​​gradi sono in realtà diversi agli occhi del browser, pur essendo lo stesso punto. Ad esempio, se provi a ruotarlo da 0 ° a 0 ° (o da 360 ° a 360 °), non ruoterà affatto. Ruotandolo da 0 gradi a 360 gradi, si dice al browser di ruotare l'oggetto di 360 gradi prima di completare l'animazione. Imposta il animation-iteration-count: infinite;e avrai infiniti frame nell'animazione. Anche una rotazione di 20 minuti sarà perfetta e fluida.
jacurtis,

28

Non hai specificato alcun fotogramma chiave. L'ho fatto funzionare qui .

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

In realtà puoi fare un sacco di cose davvero interessanti con questo. Eccone uno che ho fatto prima .

:)

NB Puoi saltare la necessità di scrivere tutti i prefissi se usi -prefix-free .


17

A partire dall'ultimo Chrome / FF e su IE11 non è necessario il prefisso -ms / -moz / -webkit. Ecco un codice più breve (basato sulle risposte precedenti):

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

Demo live: http://jsfiddle.net/9Ryvs/3057/


5
Combina le regole di animazione con la stenografia animation: spin 4s linear infinite.
Josh Habdas,

10

HTML con glyphicon fantastico per i caratteri.

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

1
Ottieni anche il mio voto per l'aggiunta della definizione di .spin
Blair Connolly il

6

L'unica risposta che dà la 359 gradi corretta:

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

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

Ecco un gradiente utile in modo da poter dimostrare che sta ruotando (se è un cerchio):

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

4

Per ruotare, è possibile utilizzare i fotogrammi chiave e una trasformazione.

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

Esempio


4

Per motivi di completamento, ecco un esempio di Sass / Compass che accorcia davvero il codice, il CSS compilato includerà i prefissi necessari ecc.

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

+keyframes(spin)
  from
    +transform(rotate(0deg))
  to
    +transform(rotate(360deg))

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.