title: Can I apply a CSS transition to the overflow property?
body: <p>I'm trying to set a <code>transition-delay</code> to the <code>overflow</code> property of <code>body</code> when a <code>div</code> is clicked by adding a class to the <code>body</code> as follows:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$("div").click(function(){
      $("body").addClass("no_overflow");
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div{
    background:lime;
    height:2000px;
  }
  .no_overflow{  
   overflow:hidden;
  }
  body{  
    overflow:auto;
    transition: overflow 0 2s;  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div&gt;I'm div&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>However, this doesn't seem to work (there's no delay). Am I doing anything wrong here?</p>
  
  <p>I know this can be achieved by using <strong>setTimeout</strong> function, but was wondering why can't this be achieved using css transitions? Are there any specific style properties to which css transitions can be applied?</p>