Допустим, у нас есть анимация, как здесь: http://jsfiddle.net/utterstep/JPDwC/

Планировка:

{amp}lt;div{amp}gt;back{amp}lt;/div{amp}gt; {amp}lt;div class="animating"{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;div{amp}gt;forward{amp}lt;/div{amp}gt; 

И соответствующий 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, или, может быть, мне будет проще переписать мой код в чистом JS? (в настоящее время мне не нравится эта идея, потому что у меня много свойств для анимации, а CSS делает ее намного проще для меня)

Возможно, вы получили ответ в CSS JS

Пожалуйста, обратитесь Старый пост

Вот на скрипке из того же поста Fiddle

А с CSS только вот та Fiddle я подправил свойство :hover ,

 @-webkit-keyframes someanimation { 0% { width: 100px; } 50% { width: 200px; } 100% { width: 100px; } } @-moz-keyframes someanimation { 0% { width: 100px; } 50% { width: 200px; } 100% { width: 100px; } } @keyframes someanimation { 0% { width: 100px; } 50% { width: 200px; } 100% { width: 100px; } } @-webkit-keyframes someani2 { 0%,100% { width: 100px; } 50% { width: 200px; } } @-moz-keyframes someani2 { 0%,100% { width: 100px; } 50% { width: 200px; } } @keyframes someani2 { 0%,100% { width: 100px; } 50% { width: 200px; } } .animating { width: 200px; height: 200px; background-color: red; -webkit-animation: someanimation 5s infinite; -moz-animation: someanimation 5s infinite; animation: someanimation 5s infinite; } .animating:hover{ color:#f60; -webkit-animation: someani2 6s 1; -moz-animation: someani2 6s 1; animation: someani2 6s 1; } 
 {amp}lt;div{amp}gt;back{amp}lt;/div{amp}gt; {amp}lt;div class="animating"{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;div{amp}gt;forward{amp}lt;/div{amp}gt; 

он меняет анимацию при наведении, как кнопка назад.

Я надеюсь, что это решит вашу цель ..