Vorwärts- und Rückwärts-Schaltflächen für jQuery CSS-Animation

Question

Ich war neugierig, was wäre der beste Ansatz für die Erstellung eines solchen Szenarios.

Elemente:

1. 100 x 100 Rot-Block
2. <> Rückwärts- und Vorwärts-Taste

In Folge der Animation wie passiert.

1. Block dreht sich um 360 °
2. Block bewegt sich nach rechts 100px
3. Block nach unten bewegt 30px

Die Animation zunächst durch den ganzen Weg spielt. Meine Frage betrifft, was der beste Weg ist, zwischen den verschiedenen Animationszuständen (Schritte 1-3) vorwärts oder rückwärts zu gehen, wenn entweder eine < oder> angeklickt wird.

Answer 1

Sie können dies mit JQUERY + CSS tun. Ich habe 2 Code für Sie erstellt.
1. Code mit nur CSS, die Animation laufen ohne Hover/klicken

.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. Code mit CSS + JQuery per Mausklick.

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