title: left transition not working both ways (works left to right but not the other way around)
body: <p>I use position <code>relative</code> and <code>absolute</code> on the switch and handle respectively, then use <code>left</code> on the handle to move it to the end or start of 'cSwitch' but the transition duration i applied only works from left to right.</p>
  <p><em>i tried applying <code>right</code> too but that didn't change anything.</em></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const cSwitch = document.querySelectorAll('.cSwitch')[0];
  
  cSwitch.onclick = () =&gt; {
    
    (cSwitch.getAttribute('state') === 'on') ? cSwitch.setAttribute('state', 'off') : cSwitch.setAttribute('state', 'on');
  
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.cSwitch{
      
      position: relative;
      
      width: 150px;
      aspect-ratio: 2/1;
      
      border-radius: 50px 50px;
    
    background: crimson;
      
  }
  
  .cSwitch[state = on] .cSwitch_handle{
      
      position: absolute;
      
      left: 50%;
      
  }
  
  .cSwitch_handle{
      
      width: 75px;
      aspect-ratio: 1;
      
      border-radius: 50%;
      
      background: skyblue;
      
      left: 0%;
      
      transition: left 0.5s;
      
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="switch-wrapper"&gt;
                              
      &lt;div class="cSwitch" state="off" id="neon-switch"&gt;
           &lt;div class="cSwitch_handle"&gt;&lt;/div&gt;
      &lt;/div&gt;
                          
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>