Customize Masonry to add the fade effect with CSS3 transitions made easy.


In this example the item css is :

.item {
width: 100px;
margin: 0px;
float: left;
opacity: 0;
}

The animation for the container is:

.masonry {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
-o-transition-property: height, width;
transition-property: height, width;
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
transition-duration: 0.2s;
}

And finally the animation for the added items :

.masonry .masonry-brick {
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
transition-duration: 1s;
}

.item.masonry-brick {
opacity: 1;
-webkit-transition-property: opacity;
-moz-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
}



bye, Marco.