Each shape of pattern disappear on mouseover

I've been trying to make a pattern and make each of the shape of this pattern disappear when I put my mouse over it. The thing is that the program understand that all the shape have to disappear but I want each shape of my pattern disappear one by one when i put my mouse over.

Here is what I have done : http://ift.tt/1FqV2kL

#dot-matrix {
    background: url(http://ift.tt/1D4QQWL);
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 1
 -webkit-transition:all 0.1s ease-in-out;
    -moz-transition:all 0.1s ease-in-out;
    -o-transition:all 0.1s ease-in-out;
}

any ideas ? :( maybe i'm not using the good way. Maybe its better to creat shape one by one ? with javascript?