Как закончит анимацию при нажатии чекбокса на html, css?

Для того чтобы закончить анимацию при нажатии чекбокса на HTML и CSS, мы можем использовать комбинацию JavaScript и CSS. Вот подробное объяснение:

1. Сначала добавим HTML-код для создания чекбокса и элемента, который будет анимироваться. Например, у нас будет input элемент с типом checkbox, и div элемент, который будет анимироваться при изменении состояния чекбокса. Вот пример:

<input type="checkbox" id="checkbox">
<div class="animated-element"></div>

2. Далее добавим CSS для стилизации элементов. Мы определяем начальные стили для анимированного элемента и добавляем анимацию, которая будет проигрываться при активации чекбокса. Вот пример:

.animated-element {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: width 0.5s ease;
}

input[type="checkbox"]:checked ~ .animated-element {
  width: 200px;
}

Здесь мы задали начальные стили для анимированного элемента с классом .animated-element, а также добавили переходную анимацию по ширине с продолжительностью 0.5 секунды. Затем мы добавили псевдокласс :checked для input элемента с типом checkbox и выбрали .animated-element, чтобы определить новые стили, которые должны применяться при активации чекбокса.

3. Наконец, нужно добавить JavaScript-код, чтобы прослушивать изменения состояния чекбокса и запускать анимацию. Вот пример:

const checkbox = document.getElementById("checkbox");
const animatedElement = document.querySelector(".animated-element");

checkbox.addEventListener("change", function() {
  if (this.checked) {
    animatedElement.classList.add("animate");
  } else {
    animatedElement.classList.remove("animate");
  }
});

Здесь мы получаем ссылку на input элемент с идентификатором checkbox и div элемент с классом .animated-element. Затем мы добавляем обработчик события change на чекбокс, который будет вызывать функцию при изменении его состояния. В этой функции мы проверяем, активирован ли чекбокс, и добавляем класс .animate к анимированному элементу, если чекбокс активирован, или удаляем этот класс, если чекбокс деактивирован.

Таким образом, при активации чекбокса будет добавлен класс .animate, что вызовет анимацию проекта CSS, а при деактивации чекбокса класс будет удален, и анимация закончится.