<!-- Legacy code used as example code on http://css-plus.com/2012/03/css-animation-how-it-works-from-transitions-to-animations -->
<div id="ball"></div>

#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: 50px; left: 50px; }
    25% { top: 50px; left: 200px; }
    50% { top: 200px; left: 200px; }
    75% { top: 200px; left: 50px; }
    100% { top: 50px; left: 50px; }
}
@-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; }
}