J'étais curieux de savoir quelle serait la meilleure approche pour créer un scénario comme celui-ci.
éléments:
- 100 x 100 bloc rouge
- <> boutons avant et arrière
En séquence de la façon dont l'animation se produit.
- le bloc pivote à 360 °
- le bloc se déplace vers la droite de 100 pixels
- le bloc descend de 30 pixels
L'animation est initialement diffusée tout au long. Ma question concerne la meilleure façon de reculer ou d'avancer entre les différents états d'animation (étapes 1 à 3) lorsque vous cliquez sur <ou>.
Réponses:
0 pour la réponse № 1Vous pouvez le faire en utilisant JQUERY + CSS. J'ai créé 2 codes pour vous.
1er code avec seulement CSS, l'animation s'exécute sans survol / clic
.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ème code avec CSS + JQuery au clic.
$(".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>