title: CSS transition speed change based on mouse position
body: <p>I have a div element whose width is determined by the users mouse position inside a defined area. Upon entering this area the transition should be smooth, until the width has catched up to the current mouse position and smooth again when leaving the area and the width goes back to normal. In the time between the transition should be fast, so the width is responsive to the mouse position.</p>
  
  <p>Html</p>
  
  <pre><code>&lt;div class="widthChanging"&gt;&lt;/div&gt;
  &lt;div class="HoverA"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>CSS  </p>
  
  <pre><code>.widthChanging {
      transition: width 300ms cubic-bezier(.45,.1,.14,.61);
    }
  
  .HoverA:hover + .widthChanging {
   width: calc(0.001 / var(--mouse-x, 0) * 100vw);
   transition: width 0s;
  }
  </code></pre>
  
  <p>I get the mouse position using Javascript.<br>
  When leaving the "HoverA" area the width returns smoothly, because the transition speed defined in "widthChanging" takes over. Sadly I cant (I think) do the same for entering the "HoverA" area. My only idea would be waiting the transition time before assigning a class with the slower transition time, but this seems like a bad solution to me and would also require more Javascript.</p>
  
  <p>I hope you have some more elegant ideas than me :)</p>