title: how to blur background for few seconds using JavaScript?
body: <p>i was able to find css to blur my content. but when it comes to blur the background and normal the background automatically  after 5 seconds, i was not able to do this. Basically, i just wanted to blur my text when any user clicks on input type button for just only 5 seconds and make the situation normal, through using only pure javascript, html and css.
  can anyone please help me in doing this.  </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>.blur   {
      filter: blur(5px);
      -webkit-filter: blur(5px);
      -moz-filter: blur(5px);
      -o-filter: blur(5px);
      -ms-filter: blur(5px);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;HTML&gt;
  &lt;head&gt;&lt;title&gt;Calculation&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;form&gt;
  
     PE Ratio
      &lt;input type="number"  id="PE" /&gt;&lt;br&gt;
      
    ROCE  
      &lt;input type="number" id="ROCE" /&gt;&lt;br&gt;
     
    Sales Growth 
       &lt;input type="number" id="SG" /&gt; &lt;br&gt; 
      
     &lt;input type="button" Value="Multiply" style="height: 30px; width: 150px; left: 250; top: 250;"    onsubmit="return false"  onclick="amount.value = (15 -( PE.valueAsNumber/2)) + (40 - (ROCE.valueAsNumber)) + (10-(SG.valueAsNumber))"&gt;
    
     &lt;p&gt;Rating: &lt;div id="div1"&gt;
     &lt;strong&gt;&lt;output name="amount" for="hours rate vat"&gt;0&lt;/output&gt;&lt;/strong&gt;&lt;/div&gt;
     &lt;/p&gt;
       &lt;/form&gt;
  &lt;/body&gt;
  &lt;/HTML&gt;</code></pre>
  </div>
  </div>
  </p>