Ich habe einige Demos überprüft und habe keine Ahnung, warum ich den CSS3-Spin nicht zum Laufen 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>
quelle
animation-iteration-count: infinite;
und Sie haben unendlich viele Frames in der Animation. Selbst eine 20-minütige Drehung sieht makellos und glatt aus.Sie haben keine Keyframes angegeben. Ich habe es hier zum Laufen gebracht .
Damit kann man tatsächlich viele wirklich coole Sachen machen. Hier ist eine, die ich früher gemacht habe .
:) :)
NB Sie können überspringen, dass Sie alle Präfixe ausschreiben müssen, wenn Sie -prefix-free verwenden .
quelle
Ab dem neuesten Chrome / FF und unter IE11 ist das Präfix -ms / -moz / -webkit nicht mehr erforderlich. Hier ist ein kürzerer Code (basierend auf früheren Antworten):
Live-Demo: http://jsfiddle.net/9Ryvs/3057/
quelle
animation: spin 4s linear infinite
.HTML mit tollem Glyphicon.
CSS
quelle
Die einzige Antwort, die die richtigen 359 Grad ergibt:
Hier ist ein nützlicher Farbverlauf, damit Sie beweisen können, dass er sich dreht (wenn es sich um einen Kreis handelt):
quelle
Zum Drehen können Sie Keyframes und eine Transformation verwenden.
Beispiel
quelle
Der Vollständigkeit halber hier ein Sass / Compass-Beispiel, das den Code wirklich verkürzt. Das kompilierte CSS enthält die erforderlichen Präfixe usw.
quelle
Dadurch können Sie die Frage beantworten
quelle