title: Transition delay not working for pointer-events
body: <p>In the code below, if you hover the right edge of the blue box, the red one will blink in and out until it painfully gets to the right side.</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>body, html {margin: 0px}
  
  .box {
    width: 100px;
    height: 100px;
  }
  
  .blue {
    background-color: blue;
  }
  
  .red {
    position: absolute;
    
    top: 0px;
    left: 0px;
    
    opacity: 0;
    pointer-events: none;
    
    background-color: red;
    
    transition: opacity 0.25s,
                left 0.25s;
  }
  
  .blue:hover + .red {
    opacity: 1;
    pointer-events: all;
    left: 100px;
    
    transition: opacity 0.25s,
                left 0.25s,
                pointer-events 0s linear 0.25s;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="blue box"&gt;&lt;/div&gt;
  &lt;div class="red box"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>But when I change <code>pointer-events: none</code> to something like <code>visibility: hidden</code> as recommended <a href="https://stackoverflow.com/questions/33371153/css-transition-delay-on-pointer-events-not-working">here</a> it works as intended, with the expectation of the instant appearance instead of a faded one. See the snippet below.</p>
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body, html {margin: 0px}
  
  .box {
    width: 100px;
    height: 100px;
  }
  
  .blue {
    background-color: blue;
  }
  
  .red {
    position: absolute;
    
    top: 0px;
    left: 0px;
    
    opacity: 0;
    visibility: hidden;
    
    background-color: red;
    
    transition: opacity 0.25s,
                left 0.25s;
  }
  
  .blue:hover + .red {
    opacity: 1;
    visibility: visible;
    left: 100px;
    
    transition: opacity 0.25s,
                left 0.25s,
                visibility 0s linear 0.25s;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="blue box"&gt;&lt;/div&gt;
  &lt;div class="red box"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Does <code>pointer-events</code> not support <code>transition-delay</code>? How can I achieve the effect without jittering and with smooth fading?</p>