title: During heavy javascript function css animation stops if I use translateX(100%)
body: <h3>Steps</h3>
  
  <ol>
  <li>Go on REPL: <a href="https://codesandbox.io/s/css-sidebar-animation-100-transform-wxchf?file=/App.svelte" rel="nofollow noreferrer">https://codesandbox.io/s/css-sidebar-animation-100-transform-wxchf?file=/App.svelte</a></li>
  <li>click on "Toggle Sidebar" button</li>
  <li>the animation is smooth, smoothly</li>
  <li>uncomment line 28</li>
  <li>comment line 29</li>
  <li>click again on button</li>
  <li>the animation stops when <code>heavy()</code> function is called (in <code>toggleSidebar()</code> function)</li>
  </ol>
  
  <h3>Questions</h3>
  
  <p>I don't understand why this happens?</p>
  
  <p>If I change <code>-200px</code> to <code>-100%</code> what is going on that causes the animation to stop?</p>
  
  <p>How can I fix the problem? What if I don’t know the sidebar width in advance? What if it is dynamic?</p>
  
  <h3>Code</h3>
  
  <pre class="lang-css prettyprint-override"><code>.sidebar {
    animation: sidebar-slide-right 3s ease-out;
  }
  
  @keyframes sidebar-slide-right {
    0% {
      /* transform: translateX(-100%); */
      transform: translateX(-200px);
    }
    100% {
      transform: translateX(0);
    }
  }
  </code></pre>