1

I am using keyframes to blur and fade out a div when the document is clicked and I can't figure out why after the animation is finished, the div is visible again...

CSS

#red{
    width:200px;
    height:200px;
    margin:50px;
    background:red;
}
.blur{
    -webkit-animation: fadeout linear 2.5s;
}
@-webkit-keyframes fadeout {
   0% {    -webkit-filter: opacity(100%) blur(0px);}
  50% { -webkit-filter: opacity(100%)  blur(10px);}
 100% {  -webkit-filter: opacity(0%) blur(20px);}
}

JS

$(document).click(function(){
    $('#red').addClass('blur');
});

Is there a better way of doing this? Here's a jsFiddle

Alin
  • 1,218
  • 5
  • 21
  • 47

1 Answers1

2

You'll want to use

animation-fill-mode: forwards; to maintain the final state at the end of a CSS animation.

Jack Guy
  • 8,346
  • 8
  • 55
  • 86