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.
This website uses cookies. By continuing to browse the site you are agreeing to our privacy policy.By closing this banner or clicking on any other item of this page, you agree to the use of such cookies.