如何使箭头图标上下移动

<div class="arrow"></div>

.arrow {
  width: 20px;
  height: 20px;
  background: url(arrow.png) no-repeat;
  position: relative;
  animation: moveUpDown 2s infinite;
}

@keyframes moveUpDown {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(20px);
  }
  100% {
    transform: translateY(0);
  }
}

<div id="arrow"></div>

var arrow = document.getElementById('arrow');
var position = 0;
var direction = 1;

function moveArrow() {
  position += direction;
  arrow.style.top = position + 'px';
  
  if (position >= 20 || position <= 0) {
    direction *= -1;
  }
}

setInterval(moveArrow, 100);