Как начать проигрывать анимации только после наведения на блок, в котором находятся анимируемые объекты?

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

1. Сначала создайте HTML-разметку вашего блока и анимируемых объектов. Например, вы можете использовать <div> для блока и добавить классы или атрибуты для анимированных объектов. Например:

<div class="animate-block">
  <div class="animate-object"></div>
</div>

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

.animate-block {
  width: 200px;
  height: 200px;
}

.animate-object {
  width: 50px;
  height: 50px;
  background-color: red;
  animation: pulse 1s infinite alternate;
}

@keyframes pulse {
  0% { transform: scale(1); }
  100% { transform: scale(1.5); }
}

3. Добавьте JavaScript для управления анимацией при наведении на блок. Используйте addEventListener для добавления слушателя события mouseover на блок. Внутри обработчика события измените класс или атрибут для объектов, чтобы запустить или остановить анимацию. Например:

const animateBlock = document.querySelector('.animate-block');
const animateObject = document.querySelector('.animate-object');

animateBlock.addEventListener('mouseover', function() {
  animateObject.classList.add('start-animation');
});

animateBlock.addEventListener('mouseout', function() {
  animateObject.classList.remove('start-animation');
});

4. Добавьте CSS для определения анимации объектов при наведении на блок. Например:

.animate-object.start-animation {
  animation-play-state: running;
}

В результате, после наведения на блок .animate-block, анимация объекта .animate-object начнется, а после отведения курсора анимация остановится.