6
Допустим, у нас есть анимация, как здесь: http://jsfiddle.net/utterstep/JPDwC/Как перейти к определенному ключевому кадру в анимации CSS3?
Планировка:
<div>back</div>
<div class="animating"></div>
<div>forward</div>
И соответствующий CSS:
@keyframes someanimation {
0% {
width: 100px;
}
50% {
width: 200px;
}
100% {
width: 100px;
}
}
.animating {
width: 200px;
height: 200px;
background-color: red;
animation: someanimation 5s infinite;
}
И я хочу, чтобы перейти к следующему или предыдущему состоянию анимации, когда я пресс назад или вперед. Могут быть более одного объекта, и я хотел бы переключать их состояния анимации одновременно.
Возможно ли это с помощью CSS или CSS + JS, или, может быть, мне будет проще переписать мой код в pure-JS? (В настоящее время мне не нравится эта идея, потому что у меня есть много свойств для анимации и CSS делает его гораздо проще для меня)
Что вы имеете в виду под «предыдущий» и «следующий» живой состояние? У вас есть кнопка воспроизведения/паузы для переключения состояния анимации? – Passerby
Попробуйте [this] (http://stackoverflow.com/questions/16150846/jquery-continous-back-and-forth-rotation-animation) Или [Это] (http://stackoverflow.com/questions/9536633/css -aimations-change-a-property-without-a-transition) – Amol
@Passerby извините за двусмысленность. Интересно, если я как-то _jump_ до следующего определенного состояния (например, я на 0% или, может быть, на 13%, а когда я нажимаю «следующий», я хочу перейти в 50% состояние). –