A CSS3 Blur Out Effect Using Transitions10 months ago
Recently I had to consider what the animation for dismissing a notification should communicate. Animation is important, so after some thought I decided that a blur out effect would communicate: ”This message is fading into thin air, it no longer exists”. By using a CSS3 transition on scale, opacity, blur and drop shadow this is not only easy, but also performant. Heres the demo: CSS3 Blur Our Effect.
The demo includes a very small jQuery plugin I’ve written called animatecss. It doesn’t do any animation itself but its does allow you to dynamically control the transition speed of any transition CSS3 transition and provide a callback function to be fired once the transition is complete. You should check it out & let me know your thoughts. Is the future of animation for web designers? I think so.