How do I slow down a keyframe animation? - css

Question

I have this 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;
}
}
<img src="http://placehold.it/350x150" class="blur" />
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

Answer 1

Thinking in terms of keyframes, you want to let the animation know when to start fading. Otherwise it assumes you're working towards your final opacity for the duration of the animation.
To prevent this, pin your opacity at 1 just prior to beginning the fade. You could try something like this:
.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); }
90% {
-webkit-filter: blur(5px);
opacity: 1;
}
100% {
opacity: 0;
}
}
<img src="http://placehold.it/350x150" class="blur" />
The above code only starts the fadeout in the last 10% of the animation - otherwise, the blurred image hangs around. You can nudge this duration with both your .blur duration and your keyframe percentages (larger percentage spread = longer time before fading out).