6
Diciamo che abbiamo un'animazione come qui: http://jsfiddle.net/utterstep/JPDwC/Come passare al determinato keyframe nell'animazione CSS3?
Disposizione:
<div>back</div>
<div class="animating"></div>
<div>forward</div>
e corrispondenti CSS:
@keyframes someanimation {
0% {
width: 100px;
}
50% {
width: 200px;
}
100% {
width: 100px;
}
}
.animating {
width: 200px;
height: 200px;
background-color: red;
animation: someanimation 5s infinite;
}
E voglio passare alla successiva o precedente stato di animazione quando ho premere indietro o avanti. Ci possono essere più di un oggetto e vorrei cambiare i loro stati di animazione allo stesso tempo.
E 'in qualche modo possibile tramite CSS o CSS + JS, o forse sarà più facile per me solo per riscrivere il mio codice in puro-JS? (Attualmente non mi piace questa idea, perché ho un sacco di oggetti da animare e CSS rende molto più facile per me)
Cosa si intende per "precedente" e "successivo" indietro animare Stato? Avete un pulsante play/pause per attivare lo stato dell'animazione? – Passerby
Prova [this] (http://stackoverflow.com/questions/16150846/jquery-continous-back-and-forth-rotation-animation) Oppure [This] (http://stackoverflow.com/questions/9536633/css -animations-cambio-di-proprietà-senza-un-transizione) – Amol
@Passerby dispiaciuto per l'ambiguità. Mi chiedo se in qualche modo _jump_ al prossimo stato definito (ad es. Sono al 0%, o forse il 13%, e quando premo "next", voglio arrivare allo stato del 50%). –