CSS Animation #2

Basic CSS animation moving an element around.

HTML

<div id="ball"></div>

CSS

#ball { background: #0091DC; border-radius: 25px; box-shadow: inset 0 0 1px rgba(0,0,0,0.8); height: 50px; width: 50px; position: absolute;
    -webkit-animation: ball 6s linear infinite;
       -moz-animation: ball 6s linear infinite;
        -ms-animation: ball 6s linear infinite;
         -o-animation: ball 6s linear infinite;
            animation: ball 6s linear infinite;
}

@-webkit-keyframes ball {
    0% { top: 150px; left: 350px; }
    25% { top: 50px; left: 100px; }
    50% { top: 200px; left: 200px; }
    75% { top: 200px; left: 50px; }
    100% { top: 50px; left: 1px; }
}
@-moz-keyframes ball {
    0% { top: 50px; left: 50px; }
    25% { top: 50px; left: 200px; }
    50% { top: 200px; left: 200px; }
    75% { top: 200px; left: 50px; }
    100% { top: 50px; left: 50px; }
}
@-ms-keyframes ball {
    0% { top: 50px; left: 50px; }
    25% { top: 50px; left: 200px; }
    50% { top: 200px; left: 200px; }
    75% { top: 200px; left: 50px; }
    100% { top: 50px; left: 50px; }
}
@-o-keyframes ball {
    0% { top: 50px; left: 50px; }
    25% { top: 50px; left: 200px; }
    50% { top: 200px; left: 200px; }
    75% { top: 200px; left: 50px; }
    100% { top: 50px; left: 50px; }
}
@keyframes ball {
    0% { top: 50px; left: 50px; }
    25% { top: 50px; left: 200px; }
    50% { top: 200px; left: 200px; }
    75% { top: 200px; left: 50px; }
    100% { top: 50px; left: 50px; }
}