body { background: #39F;}

.container { width: 960px; height: 400px; margin: 0 auto; text-align:center;}

.bar { position:relative; width: 100%; height: 100%; background: -webkit-linear-gradient(left, #f1faff 10%, #3398cc 45%, #3398cc 55%, #f1faff 100%) repeat; -webkit-background-size: 50% 100%; -webkit-animation: background 1s infinite linear; background: -moz-linear-gradient(left, #f1faff 10%, #3398cc 45%, #3398cc 55%, #f1faff 100%) repeat; background-size: 50% 100%; animation: background 1s infinite linear;}

.bar:hover {background:#0193CD; background: -webkit-linear-gradient(left, #f1faff 20%, #3398cc 100%); background: -moz-linear-gradient(left, #f1faff 20%, #3398cc 100%);}

.swimmer {position: absolute; width: 50px; height: 25px; border-radius: 50%; background: -webkit-linear-gradient(top, #f1faff 30%, #3398cc 100%) repeat; background: -moz-linear-gradient(top, #f1faff 30%, #3398cc 100%) repeat;}
.swimmer:nth-child(1) {top:10%; left:10%;}
.swimmer:nth-child(2) {top:25%; left:80%;}
.swimmer:nth-child(3) {top:42%; left:33%;}
.swimmer:nth-child(4) {top:68%; left:62%;}
.swimmer:nth-child(5) {top:76%; left:25%;}
.swimmer:nth-child(6) {top:89%; left:90%;}
.swimmer:nth-child(7) {top:84%; left:2%;}
.swimmer:nth-child(8) {top:15%; left:50%;}

@-webkit-keyframes background {
    0% { background-position: left bottom; }
    100% { background-position: right bottom; }
}
@keyframes background {
    0% { background-position: left bottom; }
    100% { background-position: right bottom; }
}