A CSS3 Blur Out Effect Using Transitions

As Web Designers the approach we took 6 months ago won’t be optimal today and animation is a great example of this.  We used to use javaScript for animation but now we can use CSS3 Transitions.  Whats awesome about CSS3 Transitions is that they are more optimised, more powerful and often easier than animating HTML using javaScript.

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.