Question

我尝试了很多CSS代码片段，但只做了我想要的部分内容。

这是我在function myspin(x){}

中想要实现的目标

1。）点击旋转图像x度无形中 2.）然后动画旋转800度可见
3.）缓慢缓慢停止
4.）清除所有必要的，以便下次点击按钮再次工作

function myspin() {
  var x = 800;
  document.getElementById("arrowid2").style.transform = "rotate(" + x + "deg)";
  document.getElementById("arrowid2").style.animation = "arrowspin 2s ease-out 1 normal";
}

#arrowid2 {
  position: absolute;
  top: 100px;
  left: 100px;
  -webkit-transition: -webkit-transform 2s ease-out;
}

<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
  <input type="button" value="click" onclick="myspin();" />
  <br/>
  <br/>
  <br/>
  <img id="arrowid2" src="arrow001.png" alt="" border="0" width="87" height="306">
</body>

Answer 1

所有旋转都在css中完成，js仅在2500ms（动画持续时间）后添加/删除animated类。你为什么要800度？它会在这种情况下跳到现有位置，我现在改为360 * 3，所以动画在它开始的地方结束

＆＃13;

$('img').click(function() {
  $(this).addClass('animated');
  var that = this;
  setTimeout(function() {
    $(that).removeClass('animated');
  }, 2500)
});

＆＃13;

img {
  width: 400px;
  height: 135px;
}
img.animated {
  animation: spin ease-out 2.5s;
}
@keyframes spin {
  0% {
    opacity: 0;
    transform: rotate(20deg);
  }
  10%{
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    transform: rotate(1080deg);
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src='https://puu.sh/tTsnZ/9294a8c88e.png' />

＆＃13;

HTML / CSS图像旋转和多旋转和轻松

1 个答案: