title: Force transition to complete on hover CSS
body: <p>I have created a button. When the user hovers over it, a small red arrow fades in beneath it.<br />
  The transition time is 400ms. When I hover over the button for less than 400ms, I would like the red arrow to complete its full transition before fading out.</p>
  <p>This gif shows the full transition, followed by the undesired behaviour.</p>
  <p><img src="https://i.imgur.com/9J3hHl0.gif" alt="Behaviour" /></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>@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p&amp;display=swap');
  
  :root {
      --init-bubble-padding: 0px;
      --bubble-padding: 10px;
      --triangle-height: 12px;
      --transition-delay: 0ms;
      --transition-time: 400ms;
  }
  
  * {
      font-family: 'M PLUS 1p', Verdana, Geneva, Tahoma, sans-serif;
      z-index: 100;
  }
  
  
  .popup-button-ctr {
      display: inline-block;
      position: relative;
      outline: 0px solid red;
  }
  
  .button-ctr button {
      background-color: rgba(30, 30, 30, 1);
      border: none;
      border-radius: 5px;
      outline: 0px solid rgb(90, 90, 90);
      font-weight: 900;
      color: rgb(205, 205, 205);
      padding: 8px 10px 8px 10px;
  }
  
  .button-ctr button:hover {
      color: white;
      cursor: pointer;
      background-color: rgba(50, 50, 50, 1);
  }
  
  .triangle-up,
  .triangle-right,
  .triangle-down,
  .triangle-left {
      pointer-events: none;
      display: relative;
      position: absolute;
      text-shadow: 1px 1px 10px rgba(21, 36, 63, 0.4);
      z-index: 50;
      color: rgba(255, 0, 0, 1);
      background-color: transparent;
  
      opacity: 0;
      visibility: hidden;   
      transform: scale(0);
      transition: var(--transition-time) ease-in-out;
      transition-delay: var(--transition-delay);
      transition-property: opacity, visibility, transform, top, right, bottom, left;
  }
  
  .popup-posr-up,
  .popup-posr-right,
  .popup-posr-down,
  .popup-posr-left {
      width: 0; height: 0;
      z-index: 150;
      position: absolute;
  }
  
  .popup-posr-down {
      left: 50%;
  }
  
  .popup-button-ctr .triangle-down {
      transform: rotate(0deg) translateX(-50%);  
      top: var(--init-bubble-padding); 
  }
  .popup-button-ctr:hover .triangle-down { 
      transform: rotate(0deg) translateX(-50%);
      opacity: 1;
      visibility: visible;   
      transition: var(--transition-time) ease-in-out;
      transition-delay: var(--transition-delay);
      top: var(--bubble-padding);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="popup-button-ctr"&gt;
  
  &lt;div class="button-ctr"&gt;
      &lt;button&gt;
          &lt;div style="font-size: 30px"&gt;
              Emoji Button
          &lt;/div&gt;
          This button has emojis  &lt;br /&gt;
          Let's ROCK   
      &lt;/button&gt;
  &lt;/div&gt;
  
  &lt;div class="popup-posr-down"&gt;
      &lt;div class="triangle-down"&gt;
          ▲
      &lt;/div&gt; 
  &lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Is there any way to force transitions to complete?</p>
  <p>Many thanks - Oli</p>