Square dissolver (css3)

by Oski Krawczyk

HTML

<div id="cont"></div>

CSS

#cont {
    width: 311px;
    height: 311px;
    background: #222;
    overflow: hidden;
}

#cont div {
    width: 30px;
    height: 30px;
    background: #EF4832;
    float: left;
    margin: 1px 0 0 1px;
    opacity: 1;
    font-size: 0.6em;
    -webkit-transition: all 1s;
    -webkit-transform: scale(1.0);
}

#cont div.visible {

   -webkit-transform: scale(0);
}

body {
    background: #F6F6F4;
}

JavaScript

var cells = [];

(100).each(function(cell) {
    cells[cell] = new Element('div').inject($('cont'));
    var time = parseFloat(('0.' + (cell / 10) > 0 ? (cell / 100) : (cell / 10)));
    if (time > 1) {
        time -= (0.9 * parseInt(time));
    }
    cells[cell].style.webkitTransitionDelay = time + 's';
});

setTimeout(function() {
    (100).each(function(cell) {
        cells[cell].className = 'visible';
    });
}, 0);

console.log(cells);