Animar un sprite previamente cargado en CSS

[Middrel]

Hola, buenas noches...

Tengo una imagen que contiene dos imágenes de un personaje... una viendo hacia un lado y otra hacia el otro.

Quiero animarlos con javascript, para que todo el tiempo que esté la página se estén moviendo, pero no entiendo muy bien los ejemplos que he visto en internet para hacer esto.

Mi css es este:

Código HTML:

#manguito{
	background:url(posesmango.png) repeat scroll 166px 0;
	height:211px;
	margin-left:43%;
	position:absolute;
	width:159px; }

y un script que encontré es esté:

Código Javascript:

var marco = null;
        var t = -157;
        var x = 0;
        var y = 0;
        var delay = 20;
        
        inicializar(157, 212);
        animar();
        
        function inicializar(ancho, alto) {
            x = ancho;
            y = alto;
            marco = document.getElementById('manguito');
            marco.style.width = x+'px';
            marco.style.height = y+'px';
            marco.innerHTML = '';
        }
    
        function animar() {
            if (t<350) {
                t++;
                marco.style.backgroundPosition = (t%18) * 158+'px 0px';
                marco.style.left = t*10/18+'px';
                setTimeout('animar()', delay);
            } else {
                marco.style.display = 'none';
                    }
        }
 

Leía por el foro que mencionaban la opción de JQuery de animate(), pero creo que no se aplica a esto o me equivoco?

Bueno, de antemano gracias por los comentarios.

Saludos!!