Я хочу приостановить/воспроизвести анимацию CSS с помощью одной кнопки с помощью Javascript. Цвета солнца и неба должны управляться кнопкой

HTML CODE:
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset = "utf-8">
        <title>Keyframe Animations</title>
        <link rel="stylesheet" href="SunLabcss.css" type="text/css"/>
        <script src="scriptSun.js"></script>


    </head>
    <body>
        <button id = "sunButton" onclick="sunPausePlayToggle()">PLAY/PAUSE</button

sunPausePlayToggle() is a function in JS which will control the animation .

        <div id = "sunSky"

this is a div which i am using as a background sky

            <div id = "sun"></div

the upper div is a sun which rise from right and dawn in the left

        </div>
    </body>
</html>


CSS code:

I am using keyframe animations to animate the sun and sky.

@keyframes risesky {
    0% {
        top: 100%;
        left : 100%;
        background-color: red;
    }
    50% {
        left:50%;
        top: 10%;
        background-color: yellow;

    }
    100% {
        background-color: orangered;
        top: 100%;
        left: 0%;
    }
}

@keyframes sky {
    0% , 100% {
        background-color: #1c1341;

    }
    10% {
        background-color: darkorange;
    }
    50% {
        background-color: skyblue;

    }
    80% {
        background-color: crimson;

    }
}

#sunButton{
    animation-play-state: running;
}

#sun {
    position: relative;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    animation: risesky 11s infinite;

}

#sunSky {
    height: 500px;
    overflow: hidden;
    animation:  sky 11s infinite both;
    
}


Javascript code:

here is the problem I am getting, I can only pause the animation in JS ,but can't play.

function sunPausePlayToggle(){
    document.getElementById("sunSky").style.animationPlayState = "paused";
    document.getElementById("sun").style.animationPlayState = "running";
    
}

Используйте две кнопки, это намного проще и меньше глючит. Кроме того, заголовок должен быть кратким.

ethry 09.04.2022 05:07
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Введение в технологический стек Twitch
Введение в технологический стек Twitch
В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:
8 полезных HTML-тегов, которые лучше использовать вместо <div>
8 полезных HTML-тегов, которые лучше использовать вместо <div>
Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...
HTML5: API локального хранилища (Local Storage)
HTML5: API локального хранилища (Local Storage)
LocalStorage - это простой способ хранения данных в браузере пользователя.
Доступность HTML - программирование с инклюзивной перспективой
Доступность HTML - программирование с инклюзивной перспективой
Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...
Именование классов CSS: Конвенция именования BEM
Именование классов CSS: Конвенция именования BEM
Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна,...
0
1
28
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Turn #sunButton = animation-play-state: "paused"; в css

А это жс

function sunPausePlayToggle(){
    let sunsky = document.getElementById("sunSky")
    let sun = document.getElementById("sun")
    
    const sky_sty = sunsky.style.animationPlayState === 'running';
    const sun_sty = sun.style.animationPlayState === 'running';

    sunsky.style.animationPlayState = sky_sty ? 'paused' : 'running';
    sun.style.animationPlayState = sun_sty ? 'paused' : 'running';
    
}

Другие вопросы по теме