jQuery CSS動畫的向前和向後按鈕

Question

我很好奇創建這種場景的最佳方法是什麼。

元素：

1. 100×100紅塊
2. <>向後和向前按鈕

在動畫如何發生的序列。

1. 塊旋轉360°
2. 塊向右移動100px的
3. 塊向下移動30像素

動畫最初通過播放所有的方式。我的問題涉及在單擊一個<或>之後，在不同動畫狀態之間向後或向後退出的最佳方式（步驟1-3）。

Answer 1

你可以使用JQUERY + CSS來做到這一點。 我爲您創建了2個代碼。
僅適用於CSS，沒有懸停動畫運行第一代碼/點擊與CSS + JQuery的在點擊

.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>

第二個代碼。

$(".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>