CSS3 Spin Animation

Question

Ho esaminato un bel po 'di demo e non ho idea del motivo per cui non riesco a far girare la rotazione 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>

Answer 1

di utilizzare l'animazione CSS3 è necessario anche definire i fotogrammi chiave di animazione effettivi (che hai nominato spin)

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

Una volta' hai configurato i tempi dell'animazione, devi definire l'aspetto dell'animazione. Questo viene fatto stabilendo due o più fotogrammi chiave usando la regola a @keyframes. Ogni fotogramma chiave descrive come deve essere eseguito il rendering dell'elemento animato in un determinato momento durante la sequenza di animazione.

---

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

Answer 2

Non è stata specificata tutti i fotogrammi chiave. I made it work here.

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

Si può effettivamente fare un sacco di cose davvero interessanti con questo. Here is one I made earlier.

:)

N.B. È possibile saltare la scrittura di tutti i prefissi se si utilizza -prefix-free.

Answer 3

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

Example

Answer 4

A partire dal più recente Chrome/FF e su IE11 non c'è bisogno di -ms/-moz/-webkit prefisso. Ecco un codice più corto (in base alle 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);} 
} 

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

Answer 5

Per ragioni di completezza, ecco un esempio Sass/bussola che in realtà accorcia 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)) 

Answer 6

HTML con font-impressionante glyphicon.

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

CSS

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

.spin { 
    animation: spin 1000ms linear infinite; 
}