Transition Scaling

by yuriku

HTML

<div id="container"></div>

CSS

body {
    -webkit-backface-visibility: hidden;
}
.box {
    width: 100px;
    height: 100px;
    background: red;
    float: left;
    margin: 20px;
    -webkit-transition: .2s ease-in;
    -moz-transition: .2s ease-in;
    -ms-transition: .2s ease-in;
    -o-transition: .2s ease-in;
    transition: .2s ease-in;
}

.box:hover {
    background: orange;
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}

JavaScript

var amount = 20;

while(amount--) {
 var div = $('<div></div>');
   
 div.attr('class', 'box');
 div.appendTo( $('#container') );
    
}