title: Disable CSS transition delay
body: <p>I'm trying to disable the transition delay by adding a class that put the value of the delay to 0 seconds.</p>
  
  <p>I don't now why it doesn't work.</p>
  
  <p>The only thing that worked for me was to add the <code>.no-anim</code> class <code>transition: none;</code> but than there is no animation at all.</p>
  
  <p>I want to keep the animation also after clicking the button that add the class so the solution with the <code>transition: none;</code> is not good enough in my case...</p>
  
  <p>Any idea? </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>$('.button').click(function(){
   $this = $('.box');
   $this.addClass('no-anim');
    setTimeout(function() {
     $this.removeClass('no-anim');
    }, 3000);
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.box {
    width: 200px;
    height: 200px;
    background: #333;
    transition: width .3s ease-in-out;
    position: relative;  
  }
  
  .box:hover {
      width: 300px;
      transition-delay: 2.5s;
    }
    .box.no-anim {
      transition-delay: .3s;
    }
  
  .button {
      display: inline-block;
      height: 50px;
      width: 30px;
      background: #ff3434;
      position: absolute;
      right: 0;
      top: 50%;
      margin-top: -25px;
      cursor: pointer;
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
  
  
  &lt;div class="box"&gt;
    &lt;span class="button"&gt;&lt;/span&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>