recursive animated divs

by rwaldin

HTML

This only works in Chrome and Safari.

CSS

body {
    margin: 200px;
}
div {
    position: absolute;
    width: 90px;
    height: 90px;
    background-color: rgba(158, 0, 26, .1);
    border-radius: 30px;
    -webkit-animation: spin 60s ease-in-out infinite alternate;
    -webkit-transform: rotate(0) scale(.8);
}
@-webkit-keyframes spin {
    to {
        border-radius: 0;
        -webkit-transform: rotate(360deg) scale(1.1);
    }
}

JavaScript

// nest some divs
for (var n = document.body, i = 0; i++ < 15;) {
    n.innerHTML = '<div/>';
    n = n.firstChild;
}