Кнопки вперед и назад для jQuery CSS-анимации

Question

Мне было любопытно, какой был бы лучший подход для создания такого сценария.

элементы:

1. 100 х 100 красный блок
2. <> назад и вперед кнопки

В последовательности, как происходит анимации.

1. блок поворачивается на 360 °
2. блок перемещается вправо 100px
3. блок перемещается вниз 30px

Анимация изначально играет весь путь до конца. Мой вопрос касается того, каким будет лучший способ сделать шаг назад или вперед между различными состояниями анимации (шаги 1-3), когда нажимают на < или>.

Answer 1

Вы можете сделать это, используя JQUERY + CSS. Я создал для вас 2 кода.
первый код только с помощью CSS, анимации запуска без зависании/нажмите

.box { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: #ff0000; 
 
     -webkit-animation: test 10s; 
 
    -o-animation: test 10s; 
 
    animation: test 10s; 
 
} 
 
@keyframes test { 
 
    10% {transform:rotate(360deg)} 
 
    50% {position: relative;left: 100px;} 
 
    100% {top: 30px;} 
 
}

<div class="box"> 
 

 
</div>

2-й код CSS + JQuery на мыши.

$(".left").click(function(){ 
 
$(".box").animate({ 
 
left: '100px', 
 
}); 
 
}); 
 
$(".top").click(function(){ 
 
$(".box").animate({ 
 
top: '30px', 
 
}); 
 
}); 
 
$(".rotate").click(function(){ 
 
$(".box").css("transform", "rotate(360deg)"); 
 
});

.box { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: #ff0000; 
 
    position: relative; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box"> 
 

 
</div> 
 
<div class="top">TOP</div> 
 
<div class="left">LEFT</div>