Как правильно сделать анимацию css/js?

Для создания анимации в CSS/JS вам понадобится комбинация двух языков - CSS для описания внешнего вида анимации и JavaScript для управления ее поведением и запуска. В данном ответе я расскажу вам о различных подходах к созданию анимации, а также дам несколько примеров кода.

1. CSS Transitions:
Один из самых простых способов создания анимации в CSS - использование CSS transitions. Они позволяют анимировать изменение свойств элементов по мере их изменения. Например, вы можете анимировать изменение размера, цвета или положения элемента. Вот пример кода:

HTML:

<div class="box"></div>
<button onclick="animateBox()">Анимация</button>

CSS:

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: width 1s, height 1s, background-color 1s;
}

.box.animate {
  width: 200px;
  height: 200px;
  background-color: blue;
}

JavaScript:

function animateBox() {
  var box = document.querySelector('.box');
  box.classList.add('animate');
}

В этом примере при нажатии на кнопку "Анимация", квадратный div будет плавно увеличиваться в размерах и сменит цвет фона.

2. CSS Keyframes:
Если вам нужна более сложная и настраиваемая анимация, то вы можете воспользоваться CSS keyframes. С помощью них вы можете создавать анимацию с заданными промежуточными позициями. Вот пример использования keyframes:

HTML:

<div class="box"></div>
<button onclick="animateBox()">Анимация</button>

CSS:

@keyframes animate {
  0% { width: 100px; height: 100px; background-color: red; }
  50% { width: 200px; height: 200px; background-color: blue; }
  100% { width: 100px; height: 100px; background-color: red; }
}

.box {
  width: 100px;
  height: 100px;
  background-color: red;
}

.box.animate {
  animation: animate 2s infinite;
}

JavaScript:

function animateBox() {
  var box = document.querySelector('.box');
  box.classList.add('animate');
}

В этом примере при нажатии на кнопку "Анимация" квадратный div будет анимироваться путем изменения свойств с заданными значениями в каждом keyframe.

3. JavaScript библиотеки:
Существуют также множество JavaScript библиотек, которые упрощают создание сложной анимации. Некоторые из них включают в себя GreenSock (GSAP), jQuery, Velocity.js и другие. Эти библиотеки обеспечивают более мощные инструменты для анимации и позволяют более точно контролировать процесс.

Вот пример использования библиотеки GSAP:

HTML:

<div class="box"></div>
<button onclick="animateBox()">Анимация</button>

CSS:

.box {
  width: 100px;
  height: 100px;
  background-color: red;
}

JavaScript:

function animateBox() {
  var box = document.querySelector('.box');
  
  gsap.to(box, {
    duration: 1,
    width: 200,
    height: 200,
    backgroundColor: "blue"
  });
}

В этом примере при нажатии на кнопку "Анимация" квадратный div будет плавно увеличиваться в размере и сменит цвет фона, используя GSAP для создания и управления анимацией.

Это только некоторые из способов создания анимации в CSS/JS. В зависимости от ваших потребностей, вы можете выбрать наиболее подходящий способ.