title: Blur Filter In CSS Keyframe Animation Makes Animation Choppy(non smooth). How Can I achieve Smooth animation with blurr filter?
body: <p>I just started using Css animation. I ran in to this problem. When I use blur filter the animation becomes really choppy but as I refresh the window it becomes slightly smoother and when I keep refreshing
  it becomes more smoother. when I restart my Browser, It again shows choppy animation. Please Help Me solve this problem.</p>
  <pre><code>@keyframes slide-blur-translation {
    0% {
      -webkit-transform: translateY(-1000px) scaleY(2.5) scaleX(0.2);
              transform: translateY(-1000px) scaleY(2.5) scaleX(0.2);
      -webkit-transform-origin: 50% 0%;
              transform-origin: 50% 0%;
      -webkit-filter: blur(40px);
              filter: blur(40px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0) scaleY(1) scaleX(1);
              transform: translateY(0) scaleY(1) scaleX(1);
      -webkit-transform-origin: 50% 50%;
              transform-origin: 50% 50%;
      -webkit-filter: blur(0);
              filter: blur(0);
      opacity: 1;
    }
  }
  </code></pre>
  <p>CODE:</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>function sleep(ms) {
    return new Promise(resolve =&gt; setTimeout(resolve, ms));
  }
  sleep(3000).then(() =&gt; {
    document.getElementsByClassName('element')[0].setAttribute('id', 'visible')
    for (i = 1; i &lt; 9; i++) {
      document.getElementsByClassName(`text${i}`)[0].setAttribute('style', `animation-delay:${0.07+(0.14*(i-1))}s;`)
      document.getElementsByClassName(`text${i}`)[0].setAttribute('id', 'animation')
  
    }
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#hidden {
    display: none;
  }
  
  #visible {
    position: absolute;
  }
  
  .text {
    display: block;
    height: 100px;
  }
  
  .Sn {
    float: left;
    width: 100px;
  }
  
  .teamname {
    width: 100px;
    float: left;
  }
  
  .win {
    width: 100px;
    float: left;
  }
  
  .lose {
    width: 100px;
    float: left;
  }
  
  .draw {
    width: 100px;
    float: left;
  }
  
  .total {
    width: 100px;
    float: left;
  }
  
  #animation {
    animation: slide-blur-translation 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
  }
  
  @keyframes slide-blur-translation {
    0% {
      -webkit-transform: translateY(-1000px) scaleY(2.5) scaleX(0.2);
      transform: translateY(-1000px) scaleY(2.5) scaleX(0.2);
      -webkit-transform-origin: 50% 0%;
      transform-origin: 50% 0%;
      -webkit-filter: blur(40px);
      filter: blur(40px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0) scaleY(1) scaleX(1);
      transform: translateY(0) scaleY(1) scaleX(1);
      -webkit-transform-origin: 50% 50%;
      transform-origin: 50% 50%;
      -webkit-filter: blur(0);
      filter: blur(0);
      opacity: 1;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="element" id='hidden'&gt;
    &lt;div class='text1 row2'&gt;
  
      &lt;div class='Sn Sn8'&gt;Hello&lt;/div&gt;
  
      &lt;div class='draw draw8'&gt;123&lt;/div&gt;
      &lt;div class='total total8'&gt;Friends&lt;/div&gt;
  
    &lt;/div&gt;
    &lt;div class='text2 row2'&gt;
  
      &lt;div class='Sn Sn8'&gt;HELLO&lt;/div&gt;
  
      &lt;div class='draw draw8'&gt;123&lt;/div&gt;
      &lt;div class='total total8'&gt;Friends&lt;/div&gt;
  
    &lt;/div&gt;
    &lt;div class='text3 row2'&gt;
  
      &lt;div class='Sn Sn8'&gt;HELLO&lt;/div&gt;
  
      &lt;div class='draw draw8'&gt;123&lt;/div&gt;
      &lt;div class='total total8'&gt;Friends&lt;/div&gt;
  
    &lt;/div&gt;
    &lt;div class='text4 row2'&gt;
  
      &lt;div class='Sn Sn8'&gt;HELLO&lt;/div&gt;
  
      &lt;div class='draw draw8'&gt;123&lt;/div&gt;
      &lt;div class='total total8'&gt;Friends&lt;/div&gt;
  
    &lt;/div&gt;
    &lt;div class='text5 row2'&gt;
  
      &lt;div class='Sn Sn8'&gt;HELLO&lt;/div&gt;
  
      &lt;div class='draw draw8'&gt;123&lt;/div&gt;
      &lt;div class='total total8'&gt;Friends&lt;/div&gt;
  
    &lt;/div&gt;
    &lt;div class='text6 row2'&gt;
  
      &lt;div class='Sn Sn8'&gt;HELLO&lt;/div&gt;
  
      &lt;div class='draw draw8'&gt;123&lt;/div&gt;
      &lt;div class='total total8'&gt;Friends&lt;/div&gt;
  
    &lt;/div&gt;
    &lt;div class='text7 row2'&gt;
  
      &lt;div class='Sn Sn8'&gt;HELLO&lt;/div&gt;
  
      &lt;div class='draw draw8'&gt;123&lt;/div&gt;
      &lt;div class='total total8'&gt;Friends&lt;/div&gt;
  
    &lt;/div&gt;
    &lt;div class='text8 row2'&gt;
  
      &lt;div class='Sn Sn8'&gt;HELLO&lt;/div&gt;
  
      &lt;div class='draw draw8'&gt;123&lt;/div&gt;
      &lt;div class='total total8'&gt;Friends&lt;/div&gt;
  
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>