6
Powiedzmy mamy animacja jak tutaj: http://jsfiddle.net/utterstep/JPDwC/Jak przejść do określonej klatki kluczowej w animacji CSS3?
Układ:
<div>back</div>
<div class="animating"></div>
<div>forward</div>
i odpowiadające CSS:
@keyframes someanimation {
0% {
width: 100px;
}
50% {
width: 200px;
}
100% {
width: 100px;
}
}
.animating {
width: 200px;
height: 200px;
background-color: red;
animation: someanimation 5s infinite;
}
I chcę, aby przejść do następnego lub poprzedniego stanu animacji kiedy naciśnij wstecz lub forward. Może istnieć więcej niż jeden obiekt i chciałbym zmienić ich stany animacji w tym samym czasie.
Czy jest to możliwe za pośrednictwem CSS lub CSS + JS, czy może łatwiej będzie mi przepisać kod w czystym JS? (Obecnie nie podoba mi się ten pomysł, bo mają wiele właściwości animować i CSS sprawia, że znacznie łatwiej dla mnie)
Co masz na myśli przez „poprzedni” i „następny” back animować stan? Czy masz przycisk odtwarzania/pauzy, aby przełączyć stan animacji? – Passerby
Wypróbuj [this] (http://stackoverflow.com/questions/16150846/jquery-continous-back-and-forth-rotation-animation) Lub [This] (http://stackoverflow.com/questions/9536633/css -animations-change-a-property-without-a-transition) – Amol
@Passerby przepraszam za niejednoznaczność. Zastanawiam się, czy w jakiś sposób _jump_ do następnego zdefiniowanego stanu (np. Jestem na 0%, lub może 13%, a kiedy naciśnie "Dalej", chcę przejść do stanu 50%). –