/* Toggle Animations */ const start = document.getElementById('start'); start.addEventListener('click', () => { const animations = document.querySelectorAll('[data-animation'); animations.forEach(animation => { const running = animation.style.animationPlayState || 'running'; animation.style.animationPlayState = running === 'running' ? 'paused' : 'running'; }) });

 .btn { background-color: blue; border: 0; border-radius: 0.25rem; color: #FFF; display: inline-block; margin-block-end: 0.5rem; padding: 1rem; } .box { --bgc: red; --w: 150px; align-items: center; background-color: var(--bgc); color: #FFF; display: flex; height: var(--w); justify-content: center; margin-bottom: 1rem; width: var(--w); } .slide { --animdur: 3s; --animn: slide; } [data-animation] { animation: var(--animn, none) var(--animdur, 0s) var(--animtf, linear) var(--animdel, 0s) var(--animic, infinite) var(--animdir, alternate) var(--animfm, none) var(--animps, running); } @keyframes slide { from { margin-left: 0%; } to { margin-left: calc(100% - var(--w, 150px)); } }

 <button id="start" class="btn" type="button">Start/Stop</button> <div class="box slide" data-animation="stop"></div>