Включить и отключить анимацию, по нажатию на кнопку

Question

Есть стили с анимациями:

@keyframes go-up-right {   /* назовём анимацию: "go-left-right" */
    from {
        top: 36%;
    }
    to {
        top: calc(96% - 100px);
    }
}
.progress2 {
    animation: go-up-right 4s infinite alternate;
}
@keyframes go-up-down {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
    from {
        top: 36%;
    }
    to {
        top: calc(96% - 100px);
    }
}
.progress3 {
    animation: go-up-down 2.5s infinite alternate;
}
@keyframes go {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
    from {
        left:6%;
    }
    to {
        left: calc(76% - 70px);
    }
}
.progress4 {
    animation: go 2s infinite alternate;
}
@keyframes go1 {
    0% {
        transform: rotate(0deg);
    }
    0% {
        transform: scale(1.5);
    }
    40% {
        transform: rotate(270deg);
    }
    40% {
        transform: scale(0.5);
    }
    70%{
        transform: rotate(120deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

есть html:

<a>o or off</a>
<span class="progress4" style="position: fixed;left:50%;top:72%">
    <img src="{{ url_for('static', filename='image/music_plate.png') }}" height="160" width="160"/>
</span>
<span class="progress3" style="position: fixed;right:7%;top:24%">
    <img src="{{ url_for('static', filename='image/treble_clef.png') }}">
</span>
<span class="progress2" style="position: fixed;right:16%;top:46%">
    <img src="{{ url_for('static', filename='image/apple_music.png') }}" height="100" width="100"/>
</span>

Подскажите, как можно включить и отключить анимацию по нажатию на кнопку? Наглеть не хочу, но если подскажете, как сохранить информацию о включен/выключен в куках, будет отлично.

Answer 1

document.querySelector('.control').addEventListener('click', ()=>{
  document.querySelectorAll('.animation_blocks > span').forEach(el => el.classList.toggle("animation"))
});

@keyframes go-up-right {   /* назовём анимацию: "go-left-right" */
    from {
        top: 36%;
    }
    to {
        top: calc(96% - 100px);
    }
}
.animation.progress2 {
    animation: go-up-right 4s infinite alternate;
}
@keyframes go-up-down {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
    from {
        top: 36%;
    }
    to {
        top: calc(96% - 100px);
    }
}
.animation.progress3 {
    animation: go-up-down 2.5s infinite alternate;
}
@keyframes go {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
    from {
        left:6%;
    }
    to {
        left: calc(76% - 70px);
    }
}
.animation.progress4 {
    animation: go 2s infinite alternate;
}
@keyframes go1 {
    0% {
        transform: rotate(0deg);
    }
    0% {
        transform: scale(1.5);
    }
    40% {
        transform: rotate(270deg);
    }
    40% {
        transform: scale(0.5);
    }
    70%{
        transform: rotate(120deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

<div class="animation_blocks">
<span class="animation progress4" style="position: fixed;left:50%;top:72%">
    <img src="{{ url_for('static', filename='image/music_plate.png') }}" height="160" width="160"/>
</span>
<span class="animation progress3" style="position: fixed;right:7%;top:24%">
    <img src="{{ url_for('static', filename='image/treble_clef.png') }}">
</span>
<span class="animation progress2" style="position: fixed;right:16%;top:46%">
    <img src="{{ url_for('static', filename='image/apple_music.png') }}" height="100" width="100"/>
</span>
</div>
<button class="control">ON/OFF</button>

Про cookie можно почитать тут.

БЛОГ НА HUSL

Включить и отключить анимацию, по нажатию на кнопку

Ответы (1 шт):