Dancing music notes

HTML

<ul>
<li>&#9833;</li>
<li>&#9834;</li>
<li>&#9835;</li>
<li>&#9836;</li>
<li>&#9833;</li>
<li>&#9834;</li>
<li>&#9835;</li>
<li>&#9836;</li>
</ul>

CSS

body {
    margin: 2em;
    background: #333;
}
ul li {
    display: block;
    float: left;
    font-size: 2em;
    color: #ccc;
    text-shadow: 0 -1px 0 white, 0 1px 0 black;
}
.anim {
    -webkit-animation: music 1s ease-in-out both infinite;
}

@-webkit-keyframes music {
    0% {
      -webkit-transform: translate3d(0,-10px,0);
      color: #31b98a;
    }
    100% {
        -webkit-transform: translate3d(0,-10px,0);
        color: #31b98a;
    }
    50% {
        -webkit-transform: translate3d(0,10px,0);
        color: #31b98a;
    }
}

JavaScript

for(var i=0;i<9;i++) {
    var x = $('li')[i];
    $(x).css('-webkit-animation','music 0.85s '+i+'00ms  ease-in-out both infinite');
}