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

@jorge 

Создание анимации с помощью JavaScript и CSS включает несколько шагов:

1. Шаг 1: Создание элемента, который будет анимироваться. Добавьте стили CSS к этому элементу, чтобы определить его начальное состояние и любые переходы, которые должны произойти в течение анимации.

1

1
2
3
4
5
6

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

1. Шаг 2: Используйте JavaScript для добавления/удаления классов, чтобы начать/завершить анимацию. Вы можете использовать различные события (например, клик, наведение мыши) или просто задать время задержки, прежде чем анимация начнется.

1
2

let element = document.getElementById("myElement");
element.classList.add("animate");

1. Шаг 3: Определите CSS-класс, который будет применяться к элементу во время анимации. В этом классе вы можете описать изменения свойств элемента для создания анимации.

1
2
3
4
5

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

1. Шаг 4 (необязательно): Дополнительно можно добавить обработчик события, чтобы убрать класс анимации после завершения анимации.

1
2
3

element.addEventListener("transitionend", function() {
  element.classList.remove("animate");
});

В результате, при активации анимации (например, через щелчок мыши на элементе), элемент будет изменять свои свойства (ширина, высота, цвет фона) плавно в течение указанного времени (1 секунда в данном случае).