How can I continue the animations I added with javascript when the page is refreshed?

Question

I have animations that play on the buttons for a certain time in the figure below. However, if I refresh the page or exit and re-enter while the animations are playing, the animations do not continue. While it continues for a person on the page at that moment, it does not appear for a person entering from outside. How can I solve this?

CSS

@keyframes glowing {

        50% {
            background-color: #ff0000;
            box-shadow: 0 0 20px #ff0000;

        }

        100% {
            background-color: #ff0000;
            box-shadow: 0 0 5px #ff0000;

        }
    }

    .glowing500 {
        animation: glowing 300ms infinite;

    }

JAVASCRIPT

function tensecond() {

        setTimeout(function () {
            const
                delay = ms => new Promise(r => setTimeout(r, ms)),
                btn_A = document.getElementById('first'),
                btn_B = document.getElementById('second'),
                animLoopgenerator = function* () {
                    const animLoop = [{
                            stop: null,
                            start: btn_A,
                            time_ms: 15000
                        }, {
                            stop: btn_A,
                            start: btn_B,
                            time_ms: 15000
                        }, {
                            stop: btn_B,
                            start: null,
                            time_ms: null
                        },


                    ];

                    for (elm of animLoop) yield elm
                };

            async function animLoop() {
                for await ({
                    stop,
                    start,
                    time_ms
                } of animLoopgenerator()) {
                    if (stop) stop.classList.remove('glowing500');
                    if (start) start.classList.add('glowing500');
                    if (time_ms) await delay(time_ms);
                }
            }

            animLoop();
        });

}

Answer 1

You have to save your animation state in cookie whenever your animation change, so when page refreshes, read the state from cookie first and resume the animation from that state.

You can learn cookie implementation from here: https://www.w3schools.com/js/js_cookies.asp

Hope this works for you!