Animaciones CSS3 en HTML con jQuery

Con CSS3 las posibilidades enriquecer nuestras aplicaciones Web ha aumentado bastante. Ya tenemos la opción de crear animaciones desde nuestra hoja de estilos CSS.

Las animaciones con CSS3 tienen aceleración por hardware las cuales hacen que no consuman tantos recursos como lo hace Javascript. En un computador normal no se nota la diferencia, pero cuando se pasa a un celular ó dispositivo móvil se puede comprobar su poder y utilidad.

En lo personal creo que estas interacciones deberían ir en Javascript, el cual tiene más control de las acciones del usuario, flujos conducidos por una navegación, y estas cosas que están de moda hoy en día como el "progressive enhancement", "graceful degradation" y demás.

A razón de esto, desarrollé este plugin para jQuery que maneja animaciones para CSS3.

Plugin CSS3Animate para animaciones CSS3 con jQuery

Código :

/** 
 * @author bipsa 
 * @class CSS3 Jquery Plugin and Mobile handlers. 
 */ 
;(function($){ 
    
   $.fn.isCSSAnimable = function (){ 
      return true; 
   } 
    
   /** 
    * @author Sebastian Romero 
    * @param {Object} options 
    */ 
   $.fn.CSS3Animate = function(options){ 
      var defaults = { 
         "class" : "in", 
         "oncomplete": null, 
         "time": 1000, 
         "property": "opacity", 
         "css" : {}, 
         "transition": "ease-in-out", 
         "delay" : 0 
      }; 
      var settings = $.extend({}, defaults, options); 
      this.each(function(index, current){ 
         var element = $(this); 
         if ($("body").isCSSAnimable()) { 
            if (typeof settings.property === "object")  
               settings.property = settings.property.join(",") 
            var cssApply = $.extend({}, { 
               "-webkit-animation-timing-function": settings.transition, 
               "-webkit-transition-duration": (settings.time / 1000) + "s", 
               "-webkit-transition-property": settings.property, 
               "-webkit-transition-delay": (settings.delay / 1000) + "s", 
               "-moz-transition-duration": (settings.time / 1000) + "s", 
               "-moz-transition-property" : settings.property 
            }, settings.css); 
            element.css(cssApply).addClass(settings["class"]); 
            if (settings.oncomplete)  
               element.transitionEnded(settings.oncomplete); 
         } else { 
            if(settings.oncomplete) 
               element.animate(settings.css, settings.oncomplete); 
            else  
               element.animate(settings.css); 
         } 
      }); 
      return this; 
   }; 
    
       
   /** 
    * @author bipsa 
    * @param {Function} onComplete 
    */ 
   $.fn.transitionEnded = function(onComplete){ 
      this.each(function(index, current){ 
         var element = $(this); 
         var action = function (event) { 
            if (onComplete) { 
               onComplete(event, element); 
               if((jQuery.browser.webkit != true)) 
                  element.get(0).removeEventListener('transitionend', action, false); 
               else  
                  element.get(0).removeEventListener('webkitTransitionEnd', action, false); 
            } 
         }; 
         if((jQuery.browser.webkit == true)) 
            element.get(0).addEventListener('webkitTransitionEnd', action, false); 
         else if (jQuery.browser.mozilla && (parseFloat(jQuery.browser.version.substr(0, 3)) > 1.9)) { 
            element.get(0).addEventListener('transitionend', action, false); 
         } else  
            onComplete(null, element); 
      }); 
      return this; 
   };    
})(jQuery);

Cómo usar el plugin de animación CSS3 con jQuery

La implementación de este plugin es sencilla, solo se hace el selector y se llama el método CSSAnimate, como pueden notar el plugin ya valida si soporta CSS transitions, y de no soportarlo simplemente asigna los estilos a su selección.

Imaginemos que creas una clase llamada ".mySelector" que permitirá rotar un elemento HTML.

Código :

   .mySelector {
      -moz-transform : rotate(0deg) scale(1) rotate(0deg);
      webkit-transform : rotate(0deg) scale(1) rotate(0deg);
   }

Código :

$(".mySelector").CSS3Animate({
   "property": ["-moz-transform", "webkit-transform"],
   "transition-duration": 1000,
   "css": {
      "-moz-transform" : "rotate(350deg) scale(1) rotate(15deg)",
      "webkit-transform" : "rotate(350deg) scale(1) rotate(15deg)"
   },
   "oncomplete" :function(){
      alert("listo!")
   }
});

Aquí puedes ver el ejemplo del plugin funcionando. (Google Chrome, Safari o Firefox 4 Beta)

Bueno espero que les guste,

Saludos a todos

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.