Как правильно делать анимацию с помощью 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 секунда в данном случае).

@jorge 

Для создания анимации с использованием JavaScript и CSS, следует использовать следующий подход:

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

1
2
3
4
5
6

#myElement {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: width 1s, height 1s, background-color 1s; /* определяем свойства и время анимации */
}

1. Использование JavaScript для добавления/удаления классов элементу, чтобы запустить/завершить анимацию:

1
2

let element = document.getElementById("myElement");
element.classList.add("animate"); // Добавляем класс, чтобы начать анимацию

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

1
2
3
4
5

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

1. Дополнительно можно добавить обработчик события "transitionend", который сработает после завершения анимации, чтобы удалить класс анимации:

1
2
3

element.addEventListener("transitionend", function() {
  element.classList.remove("animate"); // Удаляем класс после завершения анимации
});

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