title: How to prevent transition-delay when reversd
body: <p>I have a <code>&lt;div&gt;</code> , I want to double its <code>width</code> and <code>height</code> when <code>hover</code> .
  <br>
  But I want the <code>width</code> to be transitioned first and then <code>height</code> .
  <br>
  And when reversing (mouse moved out), I want the <code>height</code> to be transitioned first, then <code>height</code> .
  <br>
  (Just an epitome of complex transitions, to demonstrate the issue)</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-css lang-css prettyprint-override"><code>.box {
    background-color: pink;
    width: 100px;
    height: 100px;
    transition: width 1s 1s, height 1s 0s;
  }
  
  .box:hover {
    width: 200px;
    height: 200px;
    transition-delay: 0s, 1s;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;title&gt;Home&lt;/title&gt;
      &lt;meta charset="UTF-8" /&gt;
      &lt;meta name="viewport" content="width=device-width" /&gt;
      &lt;link rel="stylesheet" href="styles.css" /&gt;
      &lt;script type="module" src="script.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div class="box"&gt;&lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>In the example above, if I remove the mouse when transitioning <code>height</code> , everything is OK.
  <br>
  But if I remove the mouse when transitioning <code>width</code> , I have to wait <code>1s</code> which is the <code>transition-duration</code> of <code>height</code> part (actually because of the <code>transition-delay</code>) before the reverse transition of <code>width</code> starts, which leads to awful result when the transition queue is complex.
  <br>
  Vice versa, if I <code>hover</code> the element again when transitioning <code>height</code> backwards, I have to wait for <code>1s</code> until I can see <code>height</code> animating, because of the <code>1s</code> delay.
  I'm expecting to see <code>width</code> transitioning backwards immediately after I remove the mouse.</p>
  <hr />
  <p>Here is an example of a complex transition queue:
  <a href="https://codepen.io/xsjctony/pen/YzLKYrB" rel="nofollow noreferrer">CSS Gradient neon button with hover effect</a></p>
  <hr />
  <p>Is there any way to prevent the problem just by CSS transitions?</p>