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

Question

[erray01]

У меня есть прозрачный div, в котором находятся элементы с анимации. При наведении на этот div он становится видимым и нужно, чтобы анимации начали проигрываться именно в этот момент. До наведения анимации должны быть приостановлены. (Если анимации будут проигрываться постоянно, то можно не попасть в тайминг)

Answer 1

[Вадим]

По умолчанию саойство animation play state: pause, при наведении воспроизводите.

Comments

[erray01]

<div class="page">
        <div class="animated">
            
        </div>
    </div>

.animated {
   animation-play-state:paused;
}
.page:hover {
   animation-play-state: running;
}

Примерно такая структура. Анимация стоит на месте

[Вадим]

erray01, ну так потому что .page:hover .animated {}
Анимация же не у page должна воспроизвестись при наведении