title: How do I slow down a keyframe animation?
body: <p>I have this code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.blur {
    -webkit-animation: blur 5s ;
    -webkit-animation-fill-mode: forwards;
  }
  
  @-webkit-keyframes blur {
    0% { -webkit-filter: blur(0px); }
    0% { -webkit-filter: blur(1px); }
    50% { -webkit-filter: blur(5px); }
    60% { -webkit-filter: blur(5px); }
    100% {
      opacity: 0;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;img src="http://placehold.it/350x150" class="blur" /&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Basically I have an image and the effect that I want is to fade it in slowly, blur it and then fade it out. But when it blurs I want it to stay there for few seconds and then fade out the picture. Could you please help me out? Thanks</p>