Как сделать такую анимацию на сайте?

Для создания анимации на сайте существует несколько способов, одним из самых популярных является использование CSS анимаций.

Для начала, создайте структуру HTML файла, в котором будет размещена ваша анимация. Например, создадим простую анимацию изменения цвета фона элемента при наведении на него курсора:

 
 
 
 
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
            transition: background-color 0.5s;
        }
 
        .box:hover {
            background-color: blue;
        }
 
 
 
    <div class="box"></div>

В данном примере мы создаем блок с классом "box" и устанавливаем ему начальный цвет фона красным. Затем, с помощью CSS свойства "transition" мы устанавливаем плавное изменение цвета фона за 0.5 секунды при изменении этого свойства. При наведении курсора на блок, цвет фона меняется на синий.

Если вам нужно более сложное или динамичное анимационное действие, вы можете использовать библиотеки JavaScript, такие как jQuery или GSAP. Например, для создания анимации появления элемента на странице вы можете использовать следующий код:

 
 
 
 
 
        $(document).ready(function() {
            $(".box").fadeIn(1000);
        });
 
 
        .box {
            display: none;
            width: 100px;
            height: 100px;
            background-color: red;
        }
 
 
 
    <div class="box"></div>

В данном примере, при загрузке страницы блок с классом "box" сначала скрыт, а затем с помощью метода fadeIn() из библиотеки jQuery он плавно появляется за 1 секунду.

Таким образом, вы можете создавать различные анимации на вашем сайте с помощью CSS и JavaScript, в зависимости от ваших потребностей и уровня сложности анимации.