lecture source code/src6/animate3.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Animation</title>
        <style>

            @keyframes move {
                0% {
                    left: 0%;
                }
                50% {
                    left: 50%;
                }
                100% {
                    left: 0%;
                }
            }

            h1 {
                position: relative;
                animation-name: move;
                animation-duration: 3s;
                animation-fill-mode: forwards;
                animation-iteration-count: infinite;
            }

        </style>
        <script>
            document.addEventListener('DOMContentLoaded', () => {
                const h1 = document.querySelector('h1');

                // Stop animation initially
                h1.style.animationPlayState  = 'paused';

                // Toggle animation on click
                document.querySelector('button').onclick = () => {
                    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>