CSS3 Board

move the mouse in the white box below.

How it works

Just a bunch of div placed in a square. Their CSS defines animations when they are shown and when hovered. The hovering effect will quickly darken the background color to black (0.1s). When unhovered the background is set back to white this time a little slower, 1 second.

The 400 cells of the example above are created with a script.

The stylesheet

@keyframes hide {
        from {background-color: black;}
        to {background-color: white;}
}

@keyframes show {
        from {background-color: white;}
        to {background-color: black;}
}

.cell {
        position: absolute;
        animation-name: hide;
        animation-iteration-count: 1;
        animation-duration: 1s;
        animation-timing-function: ease-out;
        background-color: white;
        border-radius: 5px;
}

.cell:hover {
        animation-name: show;
        animation-iteration-count: 1;
        animation-duration: 0.1s;
        animation-timing-function: linear;
        background-color: black;
}

.container {
        cursor: none; 
        position: relative; 
        height: 400px; 
        width: 400px; 
        border: solid 1px black;
        background-color: white;
}

The HTML and script

<div class="container">
        <script type="text/javascript">
        var size = 20;
        var width = 100/size;
        for (row = 0; row < size; row++) {
                for (col = 0; col < size; col++) {
                        document.write("<div class='cell' style='" + 
                                        "width: " + width + "%; " + 
                                        "height: " + width + "%; " + 
                                        "left:" + (row * width) + "%;" + 
                                        "top:" + (col * width) + "%;'></div>");
                }
        }
        </script>
</div>