jQuery Masonry with fade effect

2 min read
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.

Within the same category

Google unveiled latest result in a real-time box


2 min read