Плавающая кнопка на сайте

На видео представлено как работает кнопка на сайте. Как сделать плавную анимацию ее движения, то есть вверх-вниз? (со скроллом я разобрался)

Например стрелочка

<img src="https://i.imgur.com/5YgXaFa.png" alt="" height="20" class="scroll-down">

<style>
    .scroll-down {
        position: relative;
        animation: bounce 0.4s infinite;
    }
</style>

Насколько я понимаю нужно использовать keyframes, которые есть в CSS

@keyframes bounce {
  0 {
    top: 0;
  }
  50% {
    top: 2.5px;
  }
  100% {
    top: 5px;
  }
}

К моему глубокому сожалению, это работает, но не так как там, очень коряво. Как добиться плавности движения стрелочки?