CSS3 Spin Animation

Question

Ich habe ein paar Demos durchgesehen und habe keine Ahnung, warum ich den CSS3 Spin nicht zum Funktionieren bringen kann. Ich verwende die neueste stabile Version von Chrome.

Die Geige: 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

Um CSS3 Animationen verwenden müssen Sie auch die eigentliche Animation Keyframes (, die Sie spin genannt) definieren

lesen https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_animations für weitere Informationen

Sobald Sie‘ Wenn Sie das Timing der Animation konfiguriert haben, müssen Sie das Aussehen der Animation definieren. Dies geschieht, indem zwei oder mehr Keyframes mit der @keyframes at-Regel erstellt werden. Jeder Keyframe beschreibt, wie das animierte Element zu einem bestimmten Zeitpunkt während der Animationssequenz wiedergegeben werden soll.

---

Demo bei 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

Sie keine Keyframes angegeben haben. 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);} 
} 

können Sie tatsächlich tun viele wirklich coole Sachen mit diesem. Here is one I made earlier.

:)

N. B. Sie können überspringen, alle Präfixe zu schreiben, wenn Sie -prefix-free verwenden.

Answer 3

Zum Drehen können Sie Schlüsselbilder und eine Transformation verwenden.

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

Ab neueste Chrome/FF und auf IE11 gibt es keine Notwendigkeit für -ms/-moz/-webkit Präfix. Hier ist ein kürzerer Code (basierend auf früheren Antworten):

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

Aus Gründen der Fertigstellung, hier ist ein Sass/Compass Beispiel, das wirklich den Code verkürzt, wird die kompilierte CSS enthalten die erforderlichen Präfixe 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)) 

Answer 6

HTML mit font-awesome 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; 
}