animate.html

<!DOCTYPE html>
<html lang=""en>
    <head>
        <title>Animate</title>
        <style>

            @keyframes move {
                0% {
                    left: 0%;

                }
                50% {
                    left: 50%;
                }
                100% {
                    left: 0%;
                }
            }

            h1 {
                position: relative;
                animation-name: move;
                animation-duration: 2s;
                animation-fill-mode: forwards;
                animation-iteration-count: infinite;
            }
        </style>
        <script>
            document.addEventListener('DOMContentLoaded', () => {

                const h1 = document.querySelector('h1');
                h1.style.animationPlayState = 'paused';

                document.querySelector('button').onclick = function() {
                    if (h1.style.animationPlayState === 'paused') {
                        h1.style.animationPlayState = 'running';
                    } else {
                        h1.style.animationPlayState = 'paused';
                    };
                };
            });
        </script>
    </head>
    <body>
        <button>Click Here!</button>
        <h1>Welcome!</h1>
    </body>
</html>