I have successfully implemented a CSS filter to blur an element, however, I am looking for a way to make the blur ease in smoothly. I'm not sure which css property controls this easing effect?
Initially, I tried using transition: 1s; but that ended up interfering with another animation on the same element (it slides out to the left).
.event {
// transition: 1s; // It works with blur() but disrupts other animations
}
.event:hover {
-moz-filter: blur(5px);
-ms-filter: blur(5px);
-o-filter: blur(5px);
-webkit-filter: blur(5px);
filter: blur(5px);
}