javascript - 循环 div 动画

Question

我正在尝试让一个 div 持续设置动画:

$(document).ready(function() {
  function arrowmovement() {
    setTimeout(function() {
      $("#downarrowimg").animate({
        'margin-top': "-=30px"
      });
    }, 500);
    setTimeout(function() {
      $("#downarrowimg").animate({
        'margin-top': "+=30px"
      });
    }, 500);
  }
  arrowmovement();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="downarrow">
  <img id="downarrowimg" src="https://upload.wikimedia.org/wikipedia/en/f/f1/Down_Arrow_Icon.png">
</div>

它只运行一次。我做错了什么，我该如何解决？

Answer 1

这是一个纯 CSS 解决方案，可以连续地为 #downarrow 设置动画:

@keyframes downarrowanimation {
    0% {margin-top: 30px;}
    50% {margin-top: -30px;}
    100% {margin-top: 30px;}
}

#downarrow {
    animation: downarrowanimation 1s ease-in-out infinite;
}

<div id="downarrow">
<img id="downarrowimg" src="https://upload.wikimedia.org/wikipedia/en/f/f1/Down_Arrow_Icon.png">
</div>