ich diesen CSS-Code verwende ich fand an der Geige mein Rad drehen:CSS Spinnrad nach 5 Sekunden stoppen?
http://jsfiddle.net/gaby/9Ryvs/7/
div {
margin: 20px;
width: 100px;
height: 100px;
background: #f00;
-webkit-animation-name: spin;
-webkit-animation-duration: 4000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: 4000ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spin;
-ms-animation-duration: 4000ms;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
animation-name: spin;
animation-duration: 4000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@-ms-keyframes spin {
from { -ms-transform: rotate(0deg); }
to { -ms-transform: rotate(360deg); }
}
@-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);
}
}
Grundsätzlich möchte ich genau das Spinnen zu stoppen, nachdem es 1800 Degress erreicht, und dann so auf 0 zurück Ich kann es später noch einmal drehen.
Ist das möglich?
aktualisiert Ihre jsFiddle, funktioniert gut für mich in Chrome. – PlantTheIdea
Spin läuft auf 555ms pro 360 Grad (nicht sicher, bitte beachten Sie die Geige oder den Code). Auf dem Code sind es 4000ms, aber ändern Sie es auf 555ms. Ich möchte ein JavaScript-Timeout machen, damit es den IMG in einen nicht beweglichen ändert. Wie viel MS insgesamt? (555 * 4) ist das richtig? –
Wenn ich es hier in Chrome starte, ist jede Rotation 4s (4000ms) lang. Wenn Sie möchten, dass alle 5 Rotationen in insgesamt 4000ms stattfinden, dann machen Sie 800ms (4000/5). – PlantTheIdea