/* 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>