Hello world, я VladosNX и сегодня я расскажу вам как сделать крутые анимации с помощью HTML и CSS. Let's Go!

Для примера сделаем стрелку которая будет двигаться вверх-вниз. Добавим картинку стрелки:

<img src="arrow.png" class="arrow">

Самое интересное начинается в CSS. Первым делом нужно указать длительность и имя анимации:

.arrow {
    animation-duration: 1s;
    animation-name: arrow-anim;
}

Однако сейчас ничего работать не будет. Нужно создать саму анимацию. Добавляем:

@keyframes arrow-anim {
    from {
        transform: translateY(0px);
    }
    to {
        transform: translateY(50px);
    }
}

В блоке from указываем свойства, которые будет иметь элемент в начале анимации. В блоке to указываем свойства, которые будут в конце анимации. Проверяем: Magic - анимация работает! Но анимация запуститься один раз и резко вернется в начальное положение. Добавим свойство для класса arrow:

animation-iteration-count: infinite;

Теперь анимация будет воспроизводиться бесконечно. Но анимация будет не плавной. Переделаем анимацию:

@keyframes arrow-anim {
    from {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(50px);
    }
    to {
        transform: translateY(0px);
    }
}

Теперь анимация будет воспроизводиться плавно - то что нужно!
Готовый код я опубликовал на repl.it - вот тут
Надеюсь объяснил понятно. Если это так обязательно поставьте лайк! :)
С вами был VladosNX, всем удачи и Goodbye world :)