Question

我很好奇什么是创建这样的场景的最佳方法。

元素：

100 x 100红色块
＆LT; ＆GT;向后和向前按钮

按顺序排列动画。

块旋转360°
块向右移动100px
块向下移动30px

动画最初一直播放。我的问题是关于什么是在不同的动画状态（步骤1-3）之间向前或向前退步的最佳方式。或者＆gt;点击。

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>

单击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>

jQuery CSS动画的前进和后退按钮

1 个答案: