The Javascript functions setInterval() and setTimout() can be used to build an endless loop. setInterval() calls itself every 7000ms, and the two setTimeout() functions run in between. The first call starts after 2000ms and the second after 4000ms. Each CSS-Animation take about 1000ms. Guess there might be a smarter solution then mine...


(function BannerLoop(){

	setInterval(function(){

			$('#banner').removeClass('zoomInRight animated');

			setTimeout(function(){
				$('#banner').addClass('zoomOutLeft animated');
			},2000);


		   setTimeout(function(){

				$('#banner').removeClass('zoomOutLeft animated');
				$('#banner').addClass('zoomInRight animated');


		   },4000);



		},7000);



})();
<p id="banner">Don't drive angry. Don't drive angry! </p>

[1] Mozilla Developer Network: WindowTimers.setTimeout()
[2] Mozilla Developer Network: WindowTimers.setInterval()
Article Picture © flickr.com/photos/colorcream/4216535466/