In the code bundle for this book, open the 4-css-animation.html file in your preferred text editor to follow along. Also, if you have not been using Google Chrome or a browser that supports CSS3 transitions until now, be sure to use one while performing the steps listed under this recipe.

Instead of using jQuery, we assigned CSS3 transition properties to the Masonry elements. After Masonry is run, it assigns additional classes and inline styles to the elements; for example, it assigns the masonry class to the container and the masonry-brick class to the individual items.

We assigned the transition-duration property to all items, the container itself and the Masonry items inside it, so that all transitions will last for half of a second. We then assigned the height and width of the container and the left / right / top positions to transition-property. This means that whenever those values change, that is, the size of the container and the position of the Masonry items change, the transition effect will be applied to those changes.

Using CSS3 animations is great—they're efficient and they boost performance if the browser supports them. Luckily, if the browser doesn't support CSS3, we can use Modernizr and go back to using jQuery. Modernizr is a JavaScript library that detects the HTML5 and CSS3 features that are available in a user's browser, which is a great advantage.

To enable Modernizr, we will have to include the Modernizr script into our page and then add the isAnimated option to the Masonry script with the value !Modernizr.csstransitions, as shown in the following code snippet:

<script src="js/modernizr.csstrans.js"></script>
<script>
  $(function() {
    $('#masonry-container').masonry({
      itemSelector : '.masonry-item',
      isAnimated: !Modernizr.csstransitions
    });
  });
</script>

This will detect whether CSS transitions are available in our browser; if not, we will go back to using jQuery animations. In the browser, we can view information about the DOM to see whether the CSS transitions and animations are enabled. In the following screenshot, we can see that CSS transitions are enabled in Firebug for Firefox:

As opposed to that, in the following screenshot we can see that CSS transitions are turned off in Internet Explorer 9; we need to use jQuery to enable transitions: