Sto usando questo codice CSS che ho trovato sul violino a girare la mia ruota:La ruota filatrice CSS si ferma dopo 5 secondi?
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);
}
}
Fondamentalmente voglio fermare la filatura esattamente dopo aver raggiunto 1800 Degress, e poi tornare a 0 in modo Posso girarlo di nuovo più tardi.
È possibile fare?
aggiornato il tuo jsFiddle, funziona bene per me in Chrome. – PlantTheIdea
Lo spin gira su 555ms per 360 gradi (non sono sicuro, per favore vedi il violino o il codice). Sul codice, è 4000ms, ma cambiarlo in 555ms. Voglio fare un timeout javascript, quindi cambierà img in uno non in movimento. quanto ms in totale? (555 * 4) è corretto? –
quando lo eseguo su Chrome qui, ogni rotazione è lunga 4s (4000ms). se vuoi che tutte e 5 le rotazioni avvengano in un totale di 4000ms, allora fai 800ms (4000/5). – PlantTheIdea