Ejemplo de animación con jquery

/**
 * Animaciones para cabecera
 */

function animacion_cabecera() {

   var tiempo_animacion1=2000;
   var tiempo_animacion2=1000;
   var tiempo_animacion3=500;
   var tiempo_animacion4=500;

   var $decagora = $('div#cabecera a');
   var $cabeceraDerecha = $('div#cabeceraDerecha');
   var $pelota = $('img#pelota');

   // Caja contenedora con posición relativa para que la pelota tenga su posición absoluta sobre ella
   $('div#cabecera').css({position: 'relative'});

   // Tamaño sin modificar de titulo y subtitulo
   var $ancho_decagora = $decagora.width();
   var $ancho_cabeceraDerecha = $cabeceraDerecha.width();

   // Posición inicial para titulo y subtitulo
   $decagora.css({zIndex: 10,width: 0,position: 'relative'});
   $cabeceraDerecha.css({zIndex: 1,visibility: 'hidden',position: 'relative',left: -600});

   // Visualizamos pelota y ponemos en posición
   //$pelota.css({display: 'inline',zIndex: 15,position:"absolute",right: 900});
   $pelota.css({display: 'inline',zIndex: 15,position:"absolute",left: -90,top: 0});

   // Pelota en movimiento va mostrando logo
   $decagora.animate({width: $ancho_decagora},tiempo_animacion1);
   $pelota.animate({left: 240},tiempo_animacion1,null,function (){ 

      // Pelota va mostrando subtitulo
      $cabeceraDerecha.css({visibility: 'visible',position: 'relative',left: -600});
      $cabeceraDerecha.animate({width: $ancho_cabeceraDerecha,left: 0},tiempo_animacion2);
      $pelota.animate({left: 800},tiempo_animacion2,null,function(){

         // Sonido para pelota
         if (typeof HTMLAudioElement != 'undefined') {
            var audio_animacion = document.getElementById("pollball");
            if (audio_animacion.canPlayType) {
               audio_animacion.play();
               }
            }

         // Aparece signo exclamación
         var texto_cabecera = $cabeceraDerecha.html(); 
         $cabeceraDerecha.html(texto_cabecera+'<span style="align: right;padding-left: 8px"><b>!</b></span>');

         // Pelota rebota
         $pelota.animate({left: 750},tiempo_animacion3, null, function(){
            
            // Pelota desaparece
            $pelota.animate({left: 910,opacity: 0,width: 0,height: 0,top: 50},tiempo_animacion4);

            });

         }); 

      });
   
   }

$(document).ready(function() {
      animacion_cabecera();
      });